Natural Performance Manager

    @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

    Install

    npm i @pxblue/chartjs

    DownloadsWeekly Downloads

    5

    Version

    1.0.0

    License

    BSD-3-Clause

    Unpacked Size

    14 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar