ChartJS Configurations

This package contains basic support for ChartJS line, pie, bar, and donut graphs for use with Brightlayer UI.

Installation

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

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

Demos

Framework	Live Examples
Angular	View on Stackblitz
React	View on Code Sandbox