Ngx-charts: Dual y axis for line charts

[ttx-a5]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Request
Would it be possible to support dual y axis for line charts?
Something like this: http://bl.ocks.org/benjchristensen/2579619

(I think this may be related to #347)

[michaelnetapp]

+1

[Baklap4]

Anyone on this?

[fravezzimattia]

If you want something like this, you need to add a list of yAxis in your configuration. then when you add a Series you need to select the index of yAxis.

yAxis: [{
      type: 'linear',
      labels: {
        format: '{value} (n°)',
      },
      title: {
        text: 'Numero 1'
      }
    }, {
      type: 'linear',
      labels: {
        format: '{value} (ms)',
      },
      title: {
        text: 'Tempo 1'
      }
    }, {
      type: 'linear',
      labels: {
        format: '{value} (ms)',
      },
      title: {
        text: 'Tempo 2'
      }
    }]

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        name:' Time 1', 
        yAxis : 0
    },{
        data: [9.9, 31.5, 56.4, 69.2, 14.0, 76.0, 35.6, 48.5, 26.4, 94.1, 5.6, 4.4],
        name:' Time 2', 
        yAxis : 1
    }]

[chrisaige]

@fravezzimattia complete noob question, but to what configuration did you add this?

yAxis: [{ type: 'linear', labels: { format: '{value} (n°)', }, title: { text: 'Numero 1' } }, { type: 'linear', labels: { format: '{value} (ms)', }, title: { text: 'Tempo 1' } }, { type: 'linear', labels: { format: '{value} (ms)', }, title: { text: 'Tempo 2' } }]

I cant find an option where i can pass this...

[fravezzimattia]

hey @chrisaige, here an example:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-dual-axes/

   yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: 'Rainfall',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],

  series: [{
        name: 'Rainfall',
        type: 'column',
        yAxis: 1,  // => Secondary yAxis
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        tooltip: {
            valueSuffix: ' mm'
        }
    }, {
        name: 'Temperature',
        type: 'spline',
    // is omitted,  yAxis: 0 // Primary yAxis
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
        tooltip: {
            valueSuffix: '°C'
        }
    }]

[belst]

@fravezzimattia this is an issue about ngx-charts not highcharts.

[renathy]

+1

[PanwalaVandan]

Hello,
Appreciate if someone can help me achieving the mentioned functionality in Stacked Area Charts.
How do I implement the mentioned solution?
Or is there any alternate way to achieve Dual Axis Functionality in area charts?

[marjan-georgiev]

This would be done by implementing a custom chart, similar to the combo chart on our demo page:
https://swimlane.github.io/ngx-charts/#/ngx-charts/combo-chart

Here's the code: https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart

More on custom charts: https://github.com/swimlane/ngx-charts/blob/master/docs/custom-charts.md

[Mshardul]

@marjan-georgiev it's not just about 2 y-axes. The actual problem is to have 2-axes for lines with different units.
I don't think "ngx-charts' combo charts" take care of that.

an example of what 2-y-axes means: https://c3js.org/samples/axes_y2.html
Please take a look at the chart, and let me know if there is a way to achieve it.\

Thanks.

[Mshardul]

If you want something like this, you need to add a list of yAxis in your configuration. then when you add a Series you need to select the index of yAxis.

yAxis: [{
      type: 'linear',
      labels: {
        format: '{value} (n°)',
      },
      title: {
        text: 'Numero 1'
      }
    }, {
      type: 'linear',
      labels: {
        format: '{value} (ms)',
      },
      title: {
        text: 'Tempo 1'
      }
    }, {
      type: 'linear',
      labels: {
        format: '{value} (ms)',
      },
      title: {
        text: 'Tempo 2'
      }
    }]

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        name:' Time 1', 
        yAxis : 0
    },{
        data: [9.9, 31.5, 56.4, 69.2, 14.0, 76.0, 35.6, 48.5, 26.4, 94.1, 5.6, 4.4],
        name:' Time 2', 
        yAxis : 1
    }]

But this won't work for different units(scale). Is their a work-around for that??

[dev-sareno]

Hi @marjan-georgiev, this link seems broken, do you have any other working link?