Style X and Y Axis (tick mark) with Chart.js?

Question

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 (http://www.chartjs.org/docs/) that may be of help. I was able to change the X axis background using zeroLineColor, but this only works if the data set starts at zero

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).

My current markup looks like this:

<canvas id="applauseChart" width="405" height="405"></canvas>

And the code to generate the chart looks like this:

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
});

I feel like I am missing something in the docs. Is there a way to do what I'm trying to achieve?

Answer 1

With Chart.js v2.1, you can write a plugin to do this

---

Preview

---

Script

Chart.pluginService.register({
    afterDraw: function (chart, easing) {
        if (chart.config.options && chart.config.options.scales) {
            if (chart.config.options.scales.xAxes)
                chart.config.options.scales.xAxes.forEach(function (xAxisConfig) {
                    if (!xAxisConfig.color)
                        return;

                    var ctx = chart.chart.ctx;
                    var chartArea = chart.chartArea;
                    var xAxis = chart.scales[xAxisConfig.id];

                    // just draw the scale again with different colors
                    var color = xAxisConfig.gridLines.color;
                    xAxisConfig.gridLines.color = xAxisConfig.color;
                    xAxis.draw(chartArea);
                    xAxisConfig.gridLines.color = color;
                });

            if (chart.config.options.scales.yAxes)
                chart.config.options.scales.yAxes.forEach(function (yAxisConfig) {
                    if (!yAxisConfig.color)
                        return;

                    var ctx = chart.chart.ctx;
                    var chartArea = chart.chartArea;
                    var yAxis = chart.scales[yAxisConfig.id];

                    // here, since we also have the grid lines, set a clip area for the left of the y axis
                    ctx.save();
                    ctx.rect(0, 0, chartArea.left + yAxisConfig.gridLines.lineWidth - 1, chartArea.bottom + yAxisConfig.gridLines.lineWidth - 1);
                    ctx.clip();

                    var color = yAxisConfig.gridLines.color;
                    yAxisConfig.gridLines.color = yAxisConfig.color;
                    yAxis.draw(chartArea);
                    yAxisConfig.gridLines.color = color;

                    ctx.restore();
                });

            // we need to draw the tooltip so that it comes over the (redrawn) elements
            chart.tooltip.transition(easing).draw();
        }
    }
});

and then

...
options: {
    scales: {
        xAxes: [{
        color: 'blue',
        ...
        }],
        yAxes: [{
        color: 'blue',
        ...
        }]
    }
...

---

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