title: Style X and Y Axis (tick mark) with Chart.js?
body: <p>I'm trying to change both X and Y Axis' style using Chart.js, I was able to change their width, but for some reason I'm not able to change their background color and there's nothing in the docs (<a href="http://www.chartjs.org/docs/" rel="noreferrer">http://www.chartjs.org/docs/</a>) that may be of help. I was able to change the X axis background using <code>zeroLineColor</code>, but this only works if the data set starts at zero</p>
  
  <p><a href="https://i.stack.imgur.com/vj31N.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vj31N.png" alt="Chart.js with Y Axis unstyled"></a></p>
  
  <p>Note that I'm not trying to style grid lines, but actually the lines that are next to the ticks (formerly known as labels, if I'm not wrong).</p>
  
  <p>My current markup looks like this:</p>
  
  <pre><code>&lt;canvas id="applauseChart" width="405" height="405"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>And the code to generate the chart looks like this:</p>
  
  <pre><code>Chart.defaults.global.legend = {
    display: false,
    labels: {
      fontFamily: "'Open Sans', sans-serif",
      fontSize: 12,
      fontStyle: "bold",
      fontColor: "#545454"
    }
  };
  
  var ctx = $("#applauseChart");
  
  var data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [
      {
        label: "Applauses",
        fill: false,
        lineTension: 0,
        backgroundColor: "transparent",
        borderColor: "#FE8C85",
        borderWidth: 10,
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0,
        borderJoinStyle: 'miter',
        pointBorderColor: "#FE8C85",
        pointBackgroundColor: "#FE8C85",
        pointBorderWidth: 10,
        pointHoverRadius: 0,
        pointHoverBackgroundColor: "transparent",
        pointHoverBorderColor: "#FE8C85",
        pointHoverBorderWidth: 10,
        pointRadius: 0,
        pointHitRadius: 10,
        data: [0, 100, 200, 250, 150, 200, 250, 150, 100, 200, 250, 300]
      }
    ]
  };
  
  var options = {
    responsive: true,
    maintainAspectRatio: false,
    scaleStartValue: 0,
    scaleStepWidth: 50,
    defaultFontFamily : "'Open Sans', sans-serif",
    defaultFontSize : 12,
    defaultFontStyle : "bold",
    defaultFontColor : "#545454",
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          color: "#CCC8BC",
          lineWidth: 3,
          zeroLineWidth: 3,
          zeroLineColor: "#2C292E",
          drawTicks: true,
          tickMarkLength: 3
        },
        ticks: {
          fontFamily: "'Open Sans', sans-serif",
          fontSize: 12,
          fontStyle: "bold",
          fontColor: "#545454"
        }
      }],
      yAxes: [{
        gridLines: {
          display: true,
          color: "#CCC8BC",
          lineWidth: 3,
          zeroLineWidth: 3,
          zeroLineColor: "#2C292E",
          drawTicks: true,
          tickMarkLength: 3
        },
        ticks: {
          fontFamily: "'Open Sans', sans-serif",
          fontSize: 12,
          fontStyle: "bold",
          fontColor: "#545454",
        }
      }]
    }
  };
  
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
  });
  </code></pre>
  
  <p>I feel like I am missing something in the docs. Is there a way to do what I'm trying to achieve?</p>