score:0

according to chart.js documentation, the option ticks.fontcolor doesn't accept an array but a simple string.

you can however define the style of your weekend ticks through the ticks.major configuration as follows.

ticks: {
  major: {
     enabled: true,
     fontstyle: 'bold',
     fontcolor: 'red'
  }
},

further you need to mark the desired ticks as major through the afterbuildticks callback.

afterbuildticks: (scale, ticks) => {
  ticks.foreach(t => {
    const day = new date(t.value).getday();
    t.major = (day == 0 || day == 6);
  });
  return ticks;
}

please take a look at the runnable code snippet below.

const dates = [];
let day = new date('2020-01-01');
for (let i = 0; i < 20; i++) {
    dates.push(new date(day.getfullyear(), day.getmonth(), day.getdate()));
    day.setdate(day.getdate() + 1);
};

function generatedata() {
  return dates.map(d => ({ x: d, y: math.floor(math.random() * 10) + 1 }));
};

new chart('mychart', {
  type: 'bar',
  data: {
    datasets: [{
        label: 'my dataset',
        data: generatedata(),
        backgroundcolor: 'rgba(255, 99, 132, 0.2)',
        bordercolor: 'rgb(255, 99, 132)',
        borderwidth: 1
      }        
    ]
  },
  options: {
    scales: {
      xaxes: [{
        offset: true,
        type: 'time',
        time: {
          unit: 'day',
          displayformats: {
            day: 'dd d mmm',
            month: 'dd d mmm'            
          },
          tooltipformat: 'dd d mmm'
        },
        ticks: {  
          major: {      
            enabled: true,
            fontstyle: 'bold',
            fontcolor: 'red'
          }
        },
        afterbuildticks: (scale, ticks) => {
          ticks.foreach(t => {
            const day = new date(t.value).getday();
            t.major = (day == 0 || day == 6);
          });
          return ticks;
        }
      }],
      yaxes: [{
        ticks: {      
          beginatzero: true,
          stepsize: 2
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.0/chart.bundle.min.js"></script>
<canvas id="mychart" height="100"></canvas>


Related Query

More Query from same tag