This package has been deprecated

Author message:

This package has been deprecated. Please update to the new @brightlayer-ui/chartjs.

@pxblue/chartjs
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

Package Sidebar

Install

npm i @pxblue/chartjs

Weekly Downloads

1

Version

1.0.0

License

BSD-3-Clause

Unpacked Size

14 kB

Total Files

17

Last publish

Collaborators

  • px-blue