Highcharts Introduction

The steps below describe the process of a chart in Cubed before being passed into highcharts.

Step 1 - Highchart Config

Each highchart type has a config. Currently there is a highcharts config for Line, Bar, Donut and Pie charts. You can learn how to add a new highchart config here.

Step 2 - Chart Types

chart-types.js is a centralised file location for each chart type, chart options and chart selection limit.

• chartType - all chart types are added to this variable.
• chartSelectionLimit - limit for the amount a user can select from the table for a chart type.
• chartOptions - list of highcharts configs of each charts type.

Step 3 - Chart In Config Files

In the config file you have the following chart properties:

    chart: {
        chartType: ChartType.AreaSpline,
        allowedChartTypes: allChartTypesWithAreaSpline,
        chartId: 'sku-performance-chart',
        allYMetrics: [
            fields.LC_SALES,
            fields.FM_SALES,
            fields.SALES_VARIANCE,
            fields.SALES_VARIANCE_PCT,
            fields.LC_REVENUE,
            fields.FM_REVENUE,
            fields.REVENUE_VARIANCE,
            fields.REVENUE_VARIANCE_PCT,
            fields.LC_AOV,
            fields.FM_AOV,
        ],
        initialYMetrics: [fields.LC_SALES],
    },

The js demostrates the required properties for a chart in a config.

Step 4 - setConfig function

In table-graph.js setConfig function updates chart options and selection limit depending on the chartType.

NOTE: There is a ChartOptions and ChartSelectionLimit imported from chart-types.js. These are the default chart options and selection limit used in setConfig when setting the options and selection limit on the chartType.

If you would not like to use the default chart options or selection limit. You can add a options/selection limit into the config.

For example like this:

    chart: {
        chartType: ChartType.AreaSpline,
        allowedChartTypes: allChartTypesWithAreaSpline,
        chartId: 'sku-performance-chart',
        allYMetrics: [
            fields.LC_SALES,
            fields.FM_SALES,
            fields.SALES_VARIANCE,
            fields.SALES_VARIANCE_PCT,
            fields.LC_REVENUE,
            fields.FM_REVENUE,
            fields.REVENUE_VARIANCE,
            fields.REVENUE_VARIANCE_PCT,
            fields.LC_AOV,
            fields.FM_AOV,
        ],
        initialYMetrics: [fields.LC_SALES],
        options: {
            line: differentLineConfig,
            test: testConfig
        },
        selectionLimit: {
            line: 6,
            test: 12
        }
    }

In the js above you can see options and selectionLimit added to the config.

In options you can see highchart config for line changed and added a new highchart test for this config.

In selectionLimit you can see the limit for line changed to 12 and added a new limit test for this config.

Step 5 - Chart File

The config is passed into the chartType file which passes the config into CommonHighcharts.

For example if the chartType is line then the config is passed into line-chart.js then passed into CommonHighcharts.