Chart library for Angular with two Y axis

Question

Is there any library for Angular where I can plot two Y axis on the same graph (one on the left and the other on the right for example)? I tried libraries by chinmaymk and jtblin, but haven't found suitable method. Thanks.

Answer 1

var chartData = {
            "type":"mixed",
            "title":{
                "text":"Multiple Y Axis"
            },
            "scale-x":{
                
            },
            "scale-y":{
                "values":"0:50:5"
            },
            "scale-y-2":{
                "values":"0:40000:5000",
                "guide":{
                    "visible":false
                }
            },
            "series":[
                {
                    "values":[8,31,12,40,24,20,16,40,9],
                    "type":"bar",
                    "scales":"scale-x,scale-y",
                    "hover-state":{
                        "visible":false
                    }
                },
                {
                    "values":[11254,26145,17014,2444,17871,25658,34002,26178,20413],
                    "type":"line",
                    "scales":"scale-x,scale-y-2"
                }
            ]
        };

zingchart.render({
  id: "chart",
  data: chartData,
  width: "100%"
 });

#chart {
  width: 100%;  
}

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="chart"></div>

ZingChart supports multiple y-axes with the scale-y-n objects. There's also an easy to use Angular directive on Github.

There's a simple demo in the snippet and here's a more real world example. You can right click the chart itself and select "View Source" to check out the JSON.

If you have any questions about implementation feel free to reach out - I'm on the ZC team.

Answer 2

I've found n3-charts library that solves my problem.