Ramasubramaniam R
Ramasubramaniam R

Reputation: 69

show text in both y axis in dual axis chart js

When I run the following code, dual axis line chart is excuting. how to set the label or text in both yaxis (left side and right side).

I am using https://nnnick.github.io/Chart.js/docs-v2/#line-chart-chart-options

        <!doctype html>
        <html>

        <head>
            <title>Line Chart Multiple Axes</title>
            <script src="../dist/Chart.bundle.js"></script>
            <style>
            canvas {
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
            }
            </style>
        </head>

        <body>
            <div style="width:75%;">
                <canvas id="canvas"></canvas>
            </div>

            <script>


                    var lineChartData = {
                        labels: ["January", "February", "March", "April", "May", "June", "July"],
                        datasets: [{
                            label: "My First dataset",
                            data: [50, 85, 56, 50, 60, 70, 80],
                            yAxisID: "y-axis-1",
                            borderColor :"#0ad4e6"
                        }, {
                            label: "My Second dataset",
                            data: [35, 45, 75, 40, 55, 73, 82],
                            yAxisID: "y-axis-2",
                            borderColor :"#f6c63e"
                        }]
                    };


                    window.onload = function() {
                        var ctx = document.getElementById("canvas").getContext("2d");
                        window.myLine = Chart.Line(ctx, {
                            data: lineChartData,
                            options: {
                                responsive: true,
                                hoverMode: 'label',
                                stacked: false,
                                title:{
                                    display:false,
                                    text:'Chart.js Line Chart - Multi Axis'
                                },
                                animation:{
                                    duration:0
                                    },
                                    legend: {
                                    display:false,
                                        position: 'top',
                                    },
                                scales: {
                                    xAxes: [{
                                        display: true,
                                        gridLines: {
                                            offsetGridLines: false
                                        }
                                    }],
                                    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
                                        },
                                    }],
                                }
                            }
                        });
                    };


            </script>
        </body>

        </html>

Need to show Like this enter image description here

Upvotes: 1

Views: 3119

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

You need to set the scaleLabel property for the axis, like so

    ...
    id: "y-axis-1",
    scaleLabel: {
        display: true,
        labelString: "Cost"
    }
    ...

However you can't control the orientation or do a vertical layout by adjusting the options.


Fiddle - http://jsfiddle.net/r01tatnq/

Upvotes: 2

Related Questions