score:1
chartjs doesn't have a public api to do this but you can modify internal _ticks
on beforedraw
and make the label "blue" as major: true
then that label will be drawn using the major
styling in tick configuration options.
also use this with caution since it relies on internal implementation and thus might break in future releases (very unlikely to happen but just saying).
var ctx = document.getelementbyid("mychart").getcontext('2d');
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
}]
},
options: {
scales: {
yaxes: [{
ticks: {
beginatzero:true
}
}],
xaxes: [{
ticks: {
fontsize: 16,
major: {
fontsize: 20
}
}
}]
}
},
plugins: [{
beforedraw: function({ chart }, options) {
chart.boxes
.find(box => box.id === "x-axis-0")
._ticks
.find(tick => tick.label === "blue")
.major = true;
}
}]
});
<canvas id="mychart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.3/chart.min.js"></script>
ps: just in case someone is wondering how i know this internal implementation i searched filltext
in chartjs github source code and console.log(mychart)
xd
score:0
for chartjs 3.0 and higher, it can be done by using scriptable-options. include it like this into your options for ticks:
options: {
scales: {
x: {
ticks: {
font: {
size: (c) => {
if (c.index==1){
return 20 // at tick label with idx one set fontsize 20
}
else {
return 12 // for all other tick labels set fontsize 12
}
},
},
},
},
},
},
score:1
looks like it's not possible according to their docs. you can only do something like uppercase needed label with callback function
xaxes: [{
ticks: {
fontsize: 16,
callback: v => v === 'blue' ? v.touppercase() : v
}
}]
Source: stackoverflow.com
Related Query
- ChartJS Only Show Large Font Size for a Specific Tick
- Show only nth tick LINE on x-axis for Chart.js diagram
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- How to disable a tooltip for a specific dataset in ChartJS
- Chart.js: only show labels on x-axis for data points
- show label in tooltip but not in x axis for chartjs line chart
- Can I specify a different font size for each row of text in Chart Title?
- Chartjs break line for axes tick labels text
- ChartJS set default options only to specific Canvas, not globally
- Side effects from Chartjs for only *some* clients
- ChartJS x-axis show only months of year
- ChartJS V3 Radar chart Label Font Size
- Show chart.js animation only when user scroll on the specific DIV
- How to change ChartJS font size with javascript?
- Chartjs v2.5 - only show min and max on scale, absolute positioning on scale
- In Chart.js >3.0, on axis of type time, how to show labels and ticks only for existing data points (make labels reflect data)?
- Show ChartJS Stacked bar on another bar for Target vs Sales analysis
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- Empty circle - only point strok in line chart for ChartJS
- Change font size and font color in Chartjs Angular 5
- Chart.js: show tooltip color square only for certain row
- ChartJs - Is is possible to show only tooltip in one dataset?
- Set fixed label size for grouped bar chart in angular Chartjs
- How can I show chartjs datalabels only last bar?
- Chart.JS: How can I only display data labels when the doughnut size is big enough for the text?
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- chartjs - show hide specific dataset with click on element outside graph
- Access yLabel for specific bar in chartJs without click
- Legend for only specific datasets - chart.js
- Adjusting the font size and family of extra fillText labels in ChartJS
More Query from same tag
- Angular 6 multiple dynamic Charts.js not showing
- Chart.js how to remove final label on chart
- chartjs-plugin-streaming: onRefresh() callback isn't working
- How to draw x axis and y-axis origin line draw in ng2-google-charts?
- Chart.js not showing/skipping labels
- angularjs chartjs legend undefined
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- Trying to refresh label when click on it. Cannot read property '_meta' of undefined"
- Create data in data with Chartjs
- how get data from given string in javascript?
- Chart.js plugin datalabels - formatter- Add space between thousands
- Remove gridlines in AngularCharts
- Thicker X-Axis with Charts.js
- Charts.js candlestick (Financial Charts) Timeformat Question
- Is there a way to change part of the title to another font style or set a custom title format in Chart.js?
- My data array has null values in chart.js. Is there a way to draw a line between the two segments to maintain visual progress?
- Dynamic dataset from MySQL query with Chart.js
- Chart js tooltip position above chart
- (Chart.js) Is there a way to compare one chart with another so as not to have this inconsistent effect of small values being as big as big values?
- Adding image on chart js
- Chart.js - (intermediate value).Doughnut is not a function
- Bootstrap grid not working with canvas
- Puppeteer and PDF generation with canvas
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- PHP string data passed to Chart.js not rendering well
- Display JSON data in react-chartjs-2
- Trying to create chartjs constructor
- Creating charts using chart.js
- Unexpected error when attempting to update chart data in Chart.js, in a Vue app
- Chart.js Time series - x axis that change depending on timestamp