This package contains basic support for ChartJS line, pie, bar, and donut graphs for use with Brightlayer UI.
Install with npm
npm install --save @brightlayer-ui/chartjs
or yarn
yarn add @brightlayer-ui/chartjs
To use this library, specify in your HTML where you want your graph to be rendered:
<canvas id="graphId"></canvas>
Import the chart generator functions from the package:
import {
drawGraph,
createLineChartConfig,
createPieChartConfig,
createBarChartConfig,
createDonutChartConfig
} from '@brightlayer-ui/chartjs';
and then use these functions create Brightlayer UI themed chart configurations.
import { createLineChartConfig, drawChart } from '@brightlayer-ui/chartjs'
...
const lineChartConfig = createLineChartConfig();
drawChart(lineChartConfig, 'graphId');
This will use default sample data to render a chart in your application.
Read the following section for instructions on specifying your own configuration/data.
When you are ready to customize charts of your own, you can modify the returned configuration object before drawing it.
import { createPieChartConfig, drawChart } from '@brightlayer-ui/chartjs';
...
const config = createPieChartConfig();
config.data.datasets[0].backgroundColor = ['red', 'blue', 'green'];
drawChart(config, 'pie-chart-id');
This configuration object will accept any property than can be supplied to a standard ChartJS config object (API Reference).
Framework | Live Examples |
---|---|
Angular | View on Stackblitz |
React | View on Code Sandbox |