Chartjs-Custom gridLines and Axes Chartjs

This is a solution without autoSkip, using gridline colour options to hide unwanted x axis gridlines. (sorry about my British spelling of ‘colour’!)

I can’t use autoSkip since my time/x axis labels show new Year, Month, Date only once and I couldn’t work out how to not skip the particular labels which indicate a new month, for instance. I finally found that you can define gridline colours in an array, so my solution is to create a gridline colour array, setting the chart background colour to the gridlines I want to hide. In my case, I already send a list of labels with empty values for when I don’t want a label and gridline, just a datapoint.

var labels = data3json['labels'].split(',');

//set gridline colour to background when label is empty:
var xaxis_gridline_colours = [];
for (var i = 0; i < labels.length; i++) {
    if (labels[i].length > 0) {
        if (i == 0) {
            xaxis_gridline_colours.push("#cccccc"); //x and y axis!
        } else {
            xaxis_gridline_colours.push("#dddddd"); //visible gridline
        }
    } else {
        xaxis_gridline_colours.push("#ffffff"); //invisible gridline
        //or call a chart background colour variable like:
        //xaxis_gridline_colours.push(chart_bkg_colour);
    }
}

Later in the code:

chart = new Chart(ctx24, {         
    options: {
        scales: { 
            xAxes: [{
                gridLines: {
                    display: true, //default true   
                    color: xaxis_gridline_colours,

                  etc

First about the gridLines, you can in your chart options change the stepSize of your xAxes (put it to 10 for instance) so you will have 10 times less vertical grid Lines (since your xAxes stepSize seems to be 1 by default).
If the big points are bothering you, when you create your datasets you can change their pointRadius to 0; this way no points displayed just a smoothline.
Finally you can change the color of the line of each dataset by setting the property borderColor.

Take a look at this page for more customization : http://www.chartjs.org/docs/latest/charts/line.html

Hope this helps.

I have noticed that most of you add the line styles only via code. I just spend 1h looking for the settings, as I change it once, but then I couldn’t change it again.

How to do it. Post on Stackoverflow pointed me in the right direction.
Charts grid lines style

Line: this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot

Go to Properties->Chart->Chart Areas and click on 3 dots (…) next collection.

Properties

In Collection, go to Axes and again click on 3 dots (…) next collection.

Axes Collection

You will have 2 Axis: X and Y. Select each Axis and go to the required section to change properties. Be careful. They are well hidden, but I tried to highlight all the options. Of course, to perform the custom modification, you will have to code it.

Axis Collection Editor