Chartjs-Using custom dataformat in chart.js for Multi Axis Line Chart

0👍

Using example Line Chart – Multi Axis you can try to change it a little bit and find simething like below:

var json = [
    {
        "date": "2019-03-04T14:59:35.000Z",
        "data1": 21.739999771118164,
        "data2": 57.72999954223633
    },
    {
        "date": "2019-03-04T14:59:42.000Z",
        "data1": 21.739999771118164,
        "data2": 57.72999954223633
    },
    {
        "date": "2019-03-04T14:59:50.000Z",
        "data1": 21.729999542236328,
        "data2": 57.7400016784668
    }];

var labels = json.map(i => i.date);
var dataset1 = json.map(i => i.data1);
var dataset2 = json.map(i => i.data2);


let renderChart = function () {
    var ctx = document.getElementById('canvas').getContext('2d');
    new Chart(ctx, {
        "type": "line",
        "data": {
            "labels": labels,
            "datasets": [
                {
                    "label": "Dataset1",
                    "data": dataset1,
                    "fill": false,
                    "borderColor": "rgb(75, 192, 192)",
                    "lineTension": 0.1,
                    yAxisID: "y-axis-1",
                }, {
                    "label": "Dataset2",
                    "data": dataset2,
                    "fill": false,
                    "borderColor": "rgb(0, 192, 255)",
                    "lineTension": 0.2,
                    yAxisID: "y-axis-2",
                }]
        },
        "options": {
            responsive: false,
            hoverMode: 'index',
            stacked: false,
            title: {
                display: true,
                text: 'Multi Axis'
            },
            scales: {
                yAxes: [{
                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: "left",
                    id: "y-axis-1",
                }, {
                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: "right",
                    id: "y-axis-2",

                    // grid line settings
                    gridLines: {
                        drawOnChartArea: false, // only want the grid lines for one axis to show up
                    },
                }],
            }
        }
    });
}

Above code prints:
enter image description here

Leave a comment