Chart

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.

Preview

Usage

import { Chart } from 'components/lib';

function MyComponent({ ...props }){

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dataset 1',
      data: [10, 20, 30, 40, 50],
    }],
  };

  return (
    <Chart 
      type='line'
      data={ data }
      color='blue'
      showLegend
    />
  );
}

Prop	Description	Required	Value
color	line color (use array for multiple datasets)	required	string (red/blue/purple/green)
data	chart data	required	object (see below)
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

Data Format

Chart data should be in the following format:

labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn'],
datasets: [{ label: 'Gravity', data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0] }]};

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.

const labels = 'User';
const data = [
  { label: 'Owner', value: 7233 },
  { label: 'Admin', value: 321 },
  { label: 'User', value: 2101 }
];

return chart.create(data, labels);

Usage

import { Chart } from 'components/lib';

function Example({ ...props }){

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dataset 1',
      data: [10, 20, 30, 40, 50],
    }],
  };

  return (
    <div>
      <Chart 
        type='line'
        data={ data }
        color='blue'
        showLegend={ true }
      />

      <Chart 
        type='donut'
        data={ data }
        color='red'
        showLegend={ false }
      />
    </div>
  );
}

Notes

• 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.