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>
Source: stackoverflow.com
Related Query
- Chartjs: Make some ticks (Sunday, Saturday) red
- Boxplot chartjs make min and max dynamic by leaving some space on both side
- How to make integer scale in Chartjs
- Make x label horizontal in ChartJS
- ChartJs line chart - display permanent icon above some data points with text on hover
- Chart Js, Style some ticks on the axis differently
- How do I make line charts overlay over bar charts in chartjs
- ChartJs - set x-axis ticks at specified/fixed intervals
- How to make points in chartjs draggable?
- Make y-axis sticky when having horizontal scroll on chartJS and Angular
- How to add ChartJS code in Html2Pdf to view image
- How to make ChartJS not cut off tooltips?
- How to change chartjs ticks orientation to 'slope right'?
- ChartJS place y-axis labels between ticks
- How to remove some points in chartjs
- Missing Tooltip for some data points using chartjs
- How to make chartJs stacked bar always rounded when data is 0?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs show labels but not ticks
- Chartjs not working with d3 from csv source
- How to hide some points inside my line graphic in React ChartJS 2?
- How can I make small grid lines above ChartJS labels?
- chartjs xaxis ticks with round values from shifted input data
- ChartJS ticks values are not correct
- Scatter plot not showing anything chartjs needs some debugging
- how labels in chartjs can make data invisible
- How to make chartjs pie chart responsive
- ChartJS - How to change color of some data points in graph
- Make chartjs pie chart wiyh dynamic data
- Create ticks at certain time positions on a chartjs cartesian time axis
More Query from same tag
- Always show last tooltip on all datasets, leave the rest to display on hover? ChartJS
- Chart.js Bar chart resizes again when revisiting the tab
- How to show a "total" sum label on the top of stacked bars
- How to get a dynamic number into a chart.js chart?
- Chartjs2 set data 0 to type doughnut
- How to create two x-axes label using chart.js
- How to Update beginAtZero in Chart.js
- Changing size of the canvas makes it blurry
- Accessing .csv data from views file
- Is there anyway to hide the gridlines between ticks and chartArea in ChartJS?
- Chart.JS removing data stuck in loop
- How can I hide tick marks on Chart.js?
- how to highlight bar in ChartJS with onkeyup Input
- ChartJS Realtime Animation
- how to set title in legend of chart.js?
- Chart Value of the bar
- change legend item style when dataset is hidden
- How to set the pointDot option on combo stacked bar-line chart
- Charts js and laravel: Render chart after passing in json data
- chart.js mixed chart types
- Facing difficulty in opening a dialog from onClick event on a pie chart in angular 8 (using chart.js)
- chart js bar chart add animation to change color
- Multiple lines / data series from JSON file with Chart.js
- bootstrap ui+angular chart: is it possible to disable graph's auto refreshing?
- Unable to hide Legend in Chartjs with PrimeFaces7.0
- Chart Js update legend boxes of graph with graph line style
- How to address type errors when removing data with chart.js?
- Radar chart - show values near vertices in chart.js
- React Chart.js onClick for custom legends
- Problems trying to render some data on chartjs