How to render two y-axis in zingcharts-angularjs?

Adding multiple scale-y's to ZingChart in the Angular directive is the same as with vanilla JavaScript.

First you will want to be sure to include a "scale-y-2":{} object to your chart. The min:max:step values should inherit from your series values but this can be explicitly set if so desired.

Next you need to be sure to associate each set of series values to the appropriate scale-y. To do this include a "scales":"" attribute. This will accept a string with two comma separated values. You will want to declare which scale-x and which scale-y you want to associate to the series.

Currently ZingChart does not accept camel case values for scaleY2. This must be represented in JSON as "scale-y-2".

The code below should provide you with what you need. I have provided comments on the lines you likely are missing in your chart.

If you want to see a live working example you can run the code below.

var app = angular.module('myApp',['zingchart-angularjs']);

app.controller('MainController', function($scope){
  $scope.myJson = {
    globals : {
      shadow: false
    },
    type : 'bar',
    plot:{
      
    },
    backgroundColor : "#fff",
    scaleY :{
      lineColor : "#BDBFC1",
      lineWidth: "2px",
      tick:{
       lineWidth: "0px"
      }
    },
    "scale-y-2" : {  //add scale-y-2
      
    },
    scaleX :{
      lineColor : "#BDBFC1",
      lineWidth: "2px",
      tick:{
       lineWidth: "0px"
      }
    },
      series : [
        { 
          values : [54,23,34,23,43],
          scales: "scale-x, scale-y", //associate scales to series
          lineColor : "#D2262E",
          lineWidth : "2px",
          marker : {
            backgroundColor: "#D2262E",
            borderWidth : "0px"
          }
        },
        { 
          values : [1000,1500,1600,2000,4000],
          lineColor : "#2FA2CB",
          scales: "scale-x, scale-y-2", //associate scales to series
          lineWidth : "2px",
          marker : {
            backgroundColor: "#2FA2CB",
            borderWidth : "0px"
          }
        },
      ]
  };
});

html,body{
  margin: 0px;
}

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>
<body ng-app="myApp">
  <div ng-controller="MainController">
    <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="568px"></div>
  </div>
</body>

Note: I am on the ZingChart team. Please let me know if you have additional questions.

Recommended topics

Hot tags