Menu
I’m trying to make mixed chart with dual y-axis by using zingcharts-angularjs directive.
For dual Y-axis, you follow ‘scale-y-2’ pattern, but it didn’t work in my AngularJS application. Does anyone know how to render two y-axis in zingcharts-angularjs?
323
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.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With