Chart
Last updated
Last updated
The Chart
component is a responsive chart that supports multiple datasets and chart types. It leverages the chart.js library for rendering various types of charts.
color
line color (use array for multiple datasets)
required
string (red/blue/purple/green)
data
chart data
required
loading
toggle the loading spinner
optional
boolean
showLegend
toggle the legend
optional
boolean
type
type of chart to display
required
string (line/bar/pie/donut/sparkline), default: line
Chart data should be in the following format:
You can pass multiple datasets to a line or bar chart by adding to the datasets array.
There is a chart.create
method located inside the /model
directory on the server that you can use to easily format chart data.
The Chart
component uses LineChart
, BarChart
, PieChart
, DonutChart
, and SparkLineChart
components for different chart types.
The color
prop specifies the color for the chart lines.
The data
prop provides the data for the chart in the format { labels: [], datasets: [{ label: string, data: [] }] }
.
The showLegend
prop toggles the legend display.
The loading
prop toggles a loading spinner.
For more details, refer to the Chart.js documentation.
(see below)