Brightlayer UI ChartJS configuration objects

Usage no npm install needed!

<script type="module">
  import brightlayerUiChartjs from 'https://cdn.skypack.dev/@brightlayer-ui/chartjs';


ChartJS Configurations

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

Basic Usage

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 { 
} 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.

Advanced Usage

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