Example 2: A custom score chart
Steps
- Create a custom react component. For example:
<Pie /> - Add a name of the component as
displayTypeinside schema.json. For example:piechart
{
"name": "custom_field",
"meta": {
"displayType": "piechart"
}
}- Add your custom component as
controlsinside MuiForms
<MuiForms
...
controls={{
"piechart": <Pie />
}}
...
/>Schema
"root"}
:
{1 Items"fields"]
:
[8 Items[
…
]3 Items[
…
]3 Items[
…
]2 ItemsUsage
import MuiForms from "mui-forms";
import schema from "<schema_location.json>";
import Pie from "<my_pie_chart_location>";
import Bar from "<my_bar_chart_location>";
<MuiForms
name="myForm"
controls={{
piechart: <Pie />
}}
schema={schema}
onSubmit={(formData) => {
// handle form submission
}}
/>;Note:
- Following charting library is used here: https://react-chartjs-2.js.org/examples/pie-chart (opens in a new tab)