ChartJS Configurations

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

Installation

Install with npm

npm install --save @pxblue/chartjs

or yarn

yarn add @pxblue/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 '@pxblue/chartjs'; 

and then use these functions create PXBlue-themed chart configurations.

import { createLineChartConfig, drawChart } from '@pxblue/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 '@pxblue/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