Remove the vertical line in the chart js line chart

chart.js, javascript, jquery

Solution

The following applies to Chart.js 2.*.

If you only have one x-axis, whether the vertical grid lines (that are related to this x-axis) are displayed or not, is specified by the boolean value of `options.scales.xAxes[0].gridLines.display`. To be more precise, the following chart options disable the display of vertical grid lines for the single x-axis case.

options : {
    scales : {
        xAxes : [ {
            gridLines : {
                display : false
            }
        } ]
    }
}

Problem

I am using `Chart.js` to generate maps and have customised it to a good extent. But I am not able to remove the vertical grid line no matter what. Has anyone come across a situation like this? Help much appreciated. JavaScript ``` var ChartDataHome = { labels: ["", "NOV", "DEC", "JAN", "FEB"], datasets: [{ strokeColor: "rgba(255.255,255,1)", pointColor: "rgba(159,209,154,1)", pointStrokeColor: "rgba(255,255,255,1.00)", data: [4.5, 8.8, 7.5, 9.5, 7.8, 9] }] }; var step = 2; var max = 10; var start = 0; ChartOptionsHome = { scaleLabel: "<%= value + ' K ' %>", pointDot: false, bezierCurve: false, scaleOverride: true, scaleSteps: 10, scaleSteps: Math.ceil((max - start) / step), scaleStepWidth: step, scaleStartValue: start, scaleShowGridLines: true, scaleGridLineWidth: 0, scaleGridLineColor: "rgba(0,0,0,0.1)", datasetFill: false, animation: true, animationSteps: 60, scaleFontColor: "#ffffff", scaleFontSize: 14, scaleLineColor: "rgba(255,255,255,1)", datasetStrokeWidth: 6, responsive: true, } if ($("#chartHome")[0]) { DrawTheChart(ChartDataHome, ChartOptionsHome, "chartHome", "Line"); } ```

Original source