Highcharts editor custom templates with combo dual axes feature

[nileshbarai]

Hi Guys,

One request!, I want to add combo dual axes chart with help of highcharts editor. Can any one suggest, how to implement combo-dual-axes features in custom templates of highcharts editor.

Reference chart URL : https://www.highcharts.com/demo/combo-dual-axes.

Thanks in advance, Nilesh

[cvasseng]

Hi, if you want to add it as a custom template, you can do something like this:

  highed.templates.add('Combinations', {
      title: 'Bar & Line',
      thumbnail: '',
      config: {
        series: [
          {
            type: 'column'
          },
          {
            type: 'line',
            yAxis: 1
          }
        ],
        yAxis: [
          {
          }, 
          {
            opposite: true
          }
        ]
      }
    });

This will add a template - Bar & Line - in the Combinations category, with dual axis. Note that data needs to be imported or written in for the dual axis to appear.

[nileshbarai]

thanks for quick response, i'll try to implement in my current development, will update further status soon

[nileshbarai]

thanks cvasseng, it's working fine for me with data. One observation, the dynamic title text is not coming. The Y-axis tile text is showing "Values" for both axis and if we can add prefix to y-Axis values. Could you please suggest on this?

Thanks, Nilesh

[cvasseng]

You can change the axis titles either by adding title: { text: '...' } to the axis definition in the template, or by changing it using the advanced customizer. Prefix to axis values, you can change labels: { format: '...' } in the axis properties with the format described here.

[nileshbarai]

Thank you for reply. I have implemented this in my project but I am getting highcharts axis error (https://www.highcharts.com/errors/18), If I am trying to modify the yAxis features like title text, values. I saw in advance tab, there were two series objects series[0] and series[1] under series section but for yAxis I can see only one object yAxis[0] under yAxis section.

[suhashankare]

@nileshbarai

You need to adjust data according to axis for he combination charts , please refer (https://www.highcharts.com/demo/combo-multi-axes)

[nileshbarai]

@suhas I adjusted the proper config to the template and it's working fine, but after clicking on customize icon it's showing highcharts error 18 and chart is not visible. Investigated more into this and I found when we tried to customize the chart the chart default yaxis showing one axis instead of two axis object. So I m getting this error.

Thanks, Nilesh

[pooja7patidar77]

can i use highchart edit in angular