Darkening certain ticks in a chart

user_10484916 0
Viewed 104

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: '';
              }
            }
          }],},
chart.js2 typescript linechart charts
1 Answers

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>

user_50907710
Related