Highcharts Configurations

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

Installation

Install with npm:

npm install --save @pxblue/highcharts

or yarn

yarn add @pxblue/highcharts

Basic Usage

To use this library, import the chart generator functions from the package:

import { 
    createLineGraph, 
    createPieGraph, 
    createDonutGraph, 
    createBarGraph 
} from '@pxblue/highcharts'; 

and then use them as placeholders in your application.

For Angular:

import { Chart } from 'angular-highcharts';
...
let lineChart = new Chart(createLineGraph());

For React:

import ReactHighcharts from 'react-highcharts';
...
<ReactHighcharts config={createLineGraph()}/>

This will use the 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 pass a configuration object into the chart generator functions.

import { createPieChart } from '@pxblue/highcharts';
...
let myPieConfig = {
    series: [{
        name: 'Browsers',
        data:[
            {name: 'Chrome', y: 61.41},
            { name: 'Internet Explorer', y: 11.84 }, 
            { name: 'Firefox', y: 10.85 }
        ]
    }],
    colors: ['red', 'orange', 'yellow']
};
let myChart = createPieChart(myPieConfig);

This configuration object will accept any property than can be supplied to a standard Highcharts config object (API Reference). Additionally, you may supply a colors property which is an array of colors to be used in the chart.

Additional Utilities

This package also includes several utility functions and style variables to make it easier for users to customize certain parts of the chart configuration. Specific documentation for these functions/variables can be found in the source files.

import {
    OpenSans,       
    pxblueColors,
    sizes
} from '@pxblue/highcharts/styles';

import {
    getRandomData,       
    sharedTooltipFormatter,
    sharedTimeTooltipFormatter,
    simpleTooltipFormatter
} from '@pxblue/highcharts/utilities';

Translations

Several functions are provided that will translate the language and format of chart labels. These functions can be imported from the i18n file and accept a language locale string as their argument.

import { getChartsLanguage, getChartsAxisDateTimeLabelFormats, getChartsTooltipDateTimeLabelFormats } from '@pxblue/highcharts';
...
const langOptions = getChartsLanguage('fr');
const axisFormats = getChartsAxisDateTimeLabelFormats('fr');
const tooltipFormats = getChartsTooltipDateTimeLabelFormats('fr');

• getChartsLanguage: (i18nLanguage: string) => Highcharts.LangOptions | undefined)
• getChartsAxisDateTimeLabelFormats: (i18nLanguage: string) => Highcharts.AxisDateTimeLabelFormatsOptions | undefined)
• getChartsTooltipDateTimeLabelFormats: (i18nLanguage: string) => FormatStrings | undefined)

FormatStrings

• day: string
• hour: string
• millisecond: string
• second: string
• minute: string
• month: string
• year: string
• week: string

Demos

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