Zingchart single curve, double y-axis on left and right

52 views Asked by At

I'm using zingchart do draw a line. I would like to have a line chart with two y-axix with same values (like duplicated axis) one on left side and one on right side, to make a easy graph read.

I'm using the following code to render the charts.

         zingchart.render({
              id: 'Chart2',
              data: Config2,
              height: '600',
              width: '100%'
          });          

          zingchart.exec('Chart2', 'modify', {graphid: 0,
              data: {
                  "title": {
                      text: ""
                  },
                  "scale-x": {
                      "labels": Labels
                  }
              }
          });

          zingchart.exec('Chart2', 'addplot', {graphid: 0, plotindex: 1,
              data: {
                  values: Data1_3,
                  text: "Gain",
                  "line-width": 5,
                  "scales": "scale-x,scale-y-3"
              }
          });

How can I accomplish that? I did not find such solution on zingchart website, because usually a secondary axis is referred to a different curve.

1

There are 1 answers

1
lasabahebwa On

To add additional scales to your line chart, you need to:

  • Create additional scale object(s) in the graph object.
  • Add a scales attribute to the series object.

In this line chart, a second y-axis scale was created with the scale-y-2 object. Then in the series object, we added a scales attribute and specified the scales we want that dataset to have, i.e. scale-x,scale-y,scale-y-2.

I hope this helps. Don't hesitate to reach out in case you have more questions.

enter image description here