Change color of line along labels Chart.js

Question

I am trying to change the colour and thickness of the lines along the Y and X axis. I don't know what I am looking for in the documentation but have named them line in the code for now.

What is the line called and what should I name it for it to work?

The lines inside the red mark I want to keep but remove grid.

HTML

<canvas id="canvas-1"></canvas>

JS

  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ['January','February','March','April','May','June','July'],
    datasets : [
      {
        label: 'My First dataset',
        labelColor : '#fff',
        fontColor : '#fff' ,
        backgroundColor : 'rgba(220,220,220,0.2)',
        borderColor : 'rgba(220,220,220,1)',
        pointBackgroundColor : 'rgba(220,220,220,1)',
        pointBorderColor : '#fff',
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  }

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      fontColor: "white",
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: true,
          drawBorder: true,
          color: "green",
        },
        ticks: {
          fontColor: "white",
        },
      }],
      yAxes: [{
        stacked: true,
        gridLines: {
          display: true,
          drawBorder: true,
          color: "blue",
        },
        ticks: {
          fontColor: "white",
          beginAtZero: true,
        }
      }]
    }
  };
  var ctx = document.getElementById('canvas-1');
  var chart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,
    options: options
  });

Answer 1

EDIT:

For those looking to change the generated graph line (not the grid lines):

---

The line options are for the line type graph, similar as you'll have a doughnut type and so on. I believe you figured that out, right?

A quick look in my code showed the option datasetStrokeWidth which you can use for the thickness. more info

The color option can be found under strokeColor for the style options.

As chart.js combines data- & style options, you're options will look something like this:

var lineChartData = {
    line: {
        datasets: [
            {
                strokeColor: '#15bedb'                            
            }
        ]
    }
};

var lineChartStyle = {
    line: {
        datasetStrokeWidth: 1
    }
};

var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,
    options: lineChartStyle
});

Answer 2

To change the color and thickness of lines (along x and y axis), set color and lineWidth property respectively, for both axis­'s grid-lines, like so :

scales: {
   xAxes: [{
      gridLines: {
         display: false,
         color: 'green',
         lineWidth: 3
      },
      ...
   }],
   yAxes: [{
      gridLines: {
         display: false,
         color: '#07C',
         lineWidth: 3
      },
      ...
   }]
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var randomScalingFactor = function() {
   return Math.round(Math.random() * 100)
};
var lineChartData = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   datasets: [{
      label: 'My First dataset',
      labelColor: '#fff',
      fontColor: '#fff',
      backgroundColor: 'rgba(220,220,220,0.2)',
      borderColor: 'rgba(220,220,220,1)',
      pointBackgroundColor: 'rgba(220,220,220,1)',
      pointBorderColor: '#fff',
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
   }]
}

var options = {
   responsive: true,
   maintainAspectRatio: false,
   legend: {
      fontColor: "white",
   },
   scales: {
      xAxes: [{
         gridLines: {
            display: false,
            color: 'green',
            lineWidth: 3
         },
         ticks: {
            fontColor: "white",
         },
      }],
      yAxes: [{
         stacked: true,
         gridLines: {
            display: false,
            color: '#07C',
            lineWidth: 3
         },
         ticks: {
            fontColor: "white",
            beginAtZero: true,
         }
      }]
   }
};
var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
   type: 'line',
   data: lineChartData,
   options: options
});

canvas { background: #222 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas-1"></canvas>