Home forums Using CanvasJS How I can have multiple y-axis?

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Vishwas R 4 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #25253

    I want the data2 on second y axis data1 on first. And How I can have months name as x-axis titles?
    `window.onload = function () {
    var data = [];
    var data2 = [];
    var chartData = [
    {
    “January”:”1″,
    “February”:”2″,
    “March”:”3″,
    “April”:”4″,
    “May”:”5″,
    “June”:”6″,
    “July”:”7″,
    “August”:”8″,
    “September”:”9″,
    “October”:”10″,
    “November”:”11″,
    “December”:”12″
    },
    {
    “January”:”12″,
    “February”:11″,
    “March”:”10″,
    “April”:”9″,
    “May”:”8″,
    “June”:”7″,
    “July”:”6″,
    “August”:”5″,
    “September”:”4″,
    “October”:”3″,
    “November”:”2″,
    “December”:”1″
    }
    ]

    for( var i=0; i<chartData.length; i++) {
    var dataPoints = [];
    for (var obj in chartData[i]) {
    if(i == 0){
    if (chartData[i].hasOwnProperty(obj)) {
    dataPoints.push({x : chartData[obj], y: Number(chartData[i][obj])});
    }
    data.push({
    type: “line”,
    dataPoints: dataPoints
    })
    }
    else
    {
    if (chartData[i].hasOwnProperty(obj)) {
    dataPoints.push({x : chartData[obj], y: Number(chartData[i][obj])});
    }
    data2.push({
    type: “line”,
    dataPoints: dataPoints
    })
    }
    }
    }
    var chart= new CanvasJS.Chart(“chartContainer”, {
    title:{
    text: “Multiple y – axis”
    },
    axisY2: {
    },
    axisY: {
    },
    data:data
    });
    chart.render();

    • This topic was modified 5 months ago by  coderrrr.
    #25259

    @dhami97,

    You can use label property to show labels over axisX and setting axisYType to secondary will attach dataSeries to secondary y-axis. Please take a look at this JSFiddle for a working example with your set of dataPoints.


    Vishwas R
    Team CanvasJS

    #25269

    thanks you so much @vishwas R, Could you please tell me how i can include legend for this chart?

    #25273

    @dhami97,

    By setting showInLegend property to true, you can show legend to a dataSeries. Please refer to the documentation page on legend for more information and more customization options available.


    Vishwas R
    Team CanvasJS

    #25281

    Hey Thanks. The data series legend is visible now but not sure where to put the legendText.

    #25286

    @dhami97,

    legendText is a property of dataSeries that’s used to set the text to be displayed in the legend for a particular dataSeries. Please refer documentation for more information along with live example.


    Vishwas R
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.