How To Add A New Highcharts

Create a config for the new highcharts

You will need to create a new config for your highchart. There are 2 types of highcharts config's.

There is an example below of each type of highcharts config's to help you decide which type of highchart config you will need.

One type of config is with series and options passed seperately into highcharts. You can see this example in the CommonHighcharts in line-chart.js and bar-charts.js. Also have a look at line/bar highcharts config files for this type of config. This type of highcharts config is used for highcharts with x and y axis.

The other type of config is with series in the config options then passed into highcharts. You can see this example in the CommonHighcharts in donut-chart.js and pie-charts.js. Also have a look at donut/pie highcharts config files for this type of config. This type of highcharts config is used for highcharts without x and y axis.

Add New Chart to chart-types.js

In chart-types.js import the new highcharts config. Add the imported highcharts to ChartType, ChartOptions and ChartSelectionLimit.

Add the new chart

In react/dash/src/configurations/charts add a new file for your new chart. Have a look at other example like line-chart.js. Pick an example similar to your highcharts config type.

Then import your new chart file into table-graph.js. In the renderTableWidget function return the chart.

for example like this:

    {(this.state.chartType === 'line' || this.state.chartType === 'areaSpline') && (
                                <LineChart
                                    chartSeriesList={this.state.chartSeriesList}
                                    config={this.state.config}
                                    chartLoading={this.state.chartLoading}
                                    isSingleDay={this.state.isSingleDay}
                                    noData={this.state.chartNoData}
                                    xMetric={this.state.chartXMetric}
                                    chartYMetrics={this.state.chartYMetrics}
                                    messageTitle={this.state.config.graphTitle}
                                    messageCopy={this.state.config.chart.graphMessageCopy}
                                    messageType={this.state.config.chart.graphMessageType}
                                />
                            )}

Pass config to CommonHighcharts.

In your new file pass the config to CommonHighcharts.

for example like this:

    return (
        <StyledLineChart isLoading={chartLoading}>
            {!noData ? (
                <CommonHighcharts
                    highcharts={Highcharts}
                    options={{ ...config.chart.options, series: chartSeriesListData }}
                    immutable={false}
                />
            ) : (
                <ComponentMessage title={messageTitle} copy={messageCopy} type={messageType} />
            )}
        </StyledLineChart>
    );