CODEWITHSUNDEEP
highchartsdatatables
Eivind
Eivind

Reputation: 123

Highcharts generated from HTML table: Can't add second yAxis dynamically

I have a variable column HTML table (in this example one date column, and three value columns). Generating a Highchart from this is simple by using the datatable as the charts' input data:

this.chart = Highcharts.chart(this.container.nativeElement, {
     data: {table: 'datatable'},
    ...
}

where I only get one yAxis, based on the last value column. This is probably as expected.

The issue: I'd like there to be a separate yAxis for each of the three value columns, with the table column header name as the yAxis label/name. Please see the screenshot below.

Datatable and Highcharts

In the above screenshot you can see that the three series have different ranges, and the one with the lowest values ("Value1") is basically displayed as being flat.

Using the Highcharts.Chart.addAxis() function works somewhat - I get the new yAxis label, but no mapping from the corresponding value column with gridlines. The challenge is that everything is loaded dynamically. Beforehand I don't know how many columns I will get, and correspondingly I don't know how many yAxis' I have to display.

All examples I've seen use hardcoded yAxis information and are of no help. I'm running out of possible Stack Overflow answers, and so far I unfortunately haven't found any addressing this particular issue.

Upvotes: 0

Views: 259

Answers (1)

ppotaczek
ppotaczek

Reputation: 39149

In addition to adding an axis, you must also connect it to the appropriate series:

chart.addAxis({
    opposite: true
});

chart.series[1].update({
    yAxis: 1
});

Live demo: https://jsfiddle.net/BlackLabel/1bkvcwmp/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#update

Upvotes: 1

Related Questions