Darkening certain ticks in a chart

Question

Graph so far:

Graph so far

I am trying to darken the ticks where 0,5, and 11 are but I cannot seem to find any information in the chart.js website. I am using chart.js2 and angular 5. I am hiding the other labels so that I only show certain labels depending on the length of the data.

  ngOnInit() {
    this.chart = new Chart('canvas', {
      type: 'line',
      data: {
        labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9','10', '11'],
        datasets: [
          {
            label: 'test',
            data: [
              100, 200, 300, 500, 100, 900, 100, 200, 500
            ],
            borderColor: '#549cef',
            backgroundColor: 'rgba(0,0,0,0.0)',
            pointBackgroundColor: 'white',
            pointRadius: 10,
            pointBorderWidth: this.getThick(),
            pointHoverBackgroundColor: '#549cef',
            borderWidth: 3
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          xAxes:[{
            gridLines: {
              drawBorder: true,
              drawOnChartArea: false,
            },
            ticks: {
              callback: function(dataLabel, index,data){
                return  data.length < 5? '':
                 data.length<12 && (index==0 || index==(data.length-1)) ? '':
                  (index==0 || index == 5 || index == 11)? dataLabel: '';
              }
            }
          }],},

WhiteHat · Accepted Answer · 2018-10-23T17:42:54.783

to darken the x-axis labels,
you can use the following options under ticks

ticks: {
  fontColor: '#000000',
  fontStyle: 'bold',

see following working snippet...

$(document).ready(function() {
  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'line',
    data: {
      labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9','10', '11'],
      datasets: [
        {
          label: 'test',
          data: [
            100, 200, 300, 500, 100, 900, 100, 200, 500
          ],
          borderColor: '#549cef',
          backgroundColor: 'rgba(0,0,0,0.0)',
          pointBackgroundColor: 'white',
          pointRadius: 10,
          //pointBorderWidth: this.getThick(),
          pointHoverBackgroundColor: '#549cef',
          borderWidth: 3
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        xAxes:[{
          gridLines: {
            drawBorder: true,
            drawOnChartArea: false,
          },
          ticks: {
            fontColor: '#000000',
            fontStyle: 'bold',
            callback: function(dataLabel, index,data){
              return  data.length < 5? '':
               data.length<12 && (index==0 || index==(data.length-1)) ? '':
                (index==0 || index == 5 || index == 11)? dataLabel: '';
            }
          }
        }],
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

EDIT

not sure you can style just the dash above the axis label,
but you can use an array of colors to style each gridline individually.

see following working snippet for an example...

$(document).ready(function() {
  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'line',
    data: {
      labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9','10', '11'],
      datasets: [
        {
          label: 'test',
          data: [
            100, 200, 300, 500, 100, 900, 100, 200, 500
          ],
          borderColor: '#549cef',
          backgroundColor: 'rgba(0,0,0,0.0)',
          pointBackgroundColor: 'white',
          pointRadius: 10,
          //pointBorderWidth: this.getThick(),
          pointHoverBackgroundColor: '#549cef',
          borderWidth: 3
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        xAxes:[{
          gridLines: {
            drawBorder: true,
            drawOnChartArea: false,
          },
          gridLines: {
            color: ['#000000', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', '#000000', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', '#000000'],
            drawBorder: false
          },
          ticks: {
            fontColor: '#000000',
            fontStyle: 'bold',
            callback: function(dataLabel, index,data){
              return  data.length < 5? '':
               data.length<12 && (index==0 || index==(data.length-1)) ? '':
                (index==0 || index == 5 || index == 11)? dataLabel: '';
            }
          }
        }],
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

hope this helps, not sure exactly what you mean by _darken_, assuming you're referring to the labels... — WhiteHat, Oct 23 '18 at 11:38
Thank you! I was referring more about the ticks on top of the labels. I will update the question make it more clear. — andrz, Oct 23 '18 at 15:47

Darkening certain ticks in a chart

1 Answers1