score:0
Accepted answer
you can use a plugin to redraw the ticks for you, might need some finetuning for your specific needs:
var options = {
type: 'line',
data: {
labels: [
["red", "subtitle"],
["blue", "subtitle"],
["yellow", "subtitle"],
["green", "subtitle"],
["purple", "subtitle"],
["orange", "subtitle"]
],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
bordercolor: 'red',
backgroundcolor: 'red'
}]
},
options: {
plugins: {
customtextcolor: {
color: 'blue',
boxcolor: 'white',
fontstringsubtitle: 'italic 12px comic sans ms',
fontstringmain: ''
}
}
},
plugins: [{
id: 'customtextcolor',
afterdraw: (chart, args, opts) => {
// set all variables needed
const {
ctx,
scales: {
y,
x
}
} = chart;
const labelitems = x._labelitems;
const {
color,
boxcolor,
fontstringmain,
fontstringsubtitle
} = opts;
const defaultfontstring = '12px "helvetica neue", helvetica, arial, sans-serif';
for (let i = 0; i < labelitems.length; i++) {
let labelitem = labelitems[i];
if (!array.isarray(labelitem.label)) {
continue;
}
let metrics = ctx.measuretext(labelitem.label);
let labelwidth = metrics.width;
let labelheight = metrics.fontboundingboxascent + metrics.fontboundingboxdescent;
//draw box over old labels so they are inviseble
ctx.save();
ctx.fillstyle = boxcolor || '#ffffff';
ctx.fillrect((labelitem.translation[0] - labelwidth / 2), labelitem.translation[1], labelwidth, labelheight * labelitem.label.length);
ctx.restore();
// draw new text on canvas
let offset = 0;
labelitem.label.foreach(el => {
let eltextmetrics = ctx.measuretext(el);
let elwidth = eltextmetrics.width;
if (labelitem.label.indexof(el) === 0) {
ctx.font = fontstringmain || defaultfontstring;
} else {
ctx.font = fontstringsubtitle || defaultfontstring;
}
ctx.save();
ctx.fillstyle = color || chart.defaults.color
ctx.filltext(el, (labelitem.translation[0] - elwidth / 2), labelitem.translation[1] + labelitem.textoffset + offset);
ctx.restore();
offset += eltextmetrics.fontboundingboxascent + eltextmetrics.fontboundingboxdescent;
});
}
// draw white box over old label
}
}]
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- ChartJs: Is there a way to control the font options per line for a multiline axis label
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- show label in tooltip but not in x axis for chartjs line chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Is there any way to use 2 different color for the same bar in a chart?
- How to draw multiple line on y axis for same x axis in chartjs v2?
- Is there a way to change part of the title to another font style or set a custom title format in Chart.js?
- Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- How to show tick marks and labels with grid line for the specific one on the X axis with 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?
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Chartjs - Line between two dots on the Y axis
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
- ChartJS – is there any way to remove blank space around pie charts?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Dynamically update the options of a chart in chartjs using Javascript
- Border radius for the bar chart in ChartJS
- Chartjs change the specific label color in x axis in callback function
- How to show Y axis ticks for every point in the graph
- In ChartJS is it possible to change the line style between different points?
- Chartjs 2.7.3: Set Y data at the correct X position axis
- chartjs - Drawing vertical line on integer x axis value
- Map event position to y axis value in chartjs line chart
- Chartjs break line for axes tick labels text
- Changing the Y axis unit in Chartjs
- Grouping the object by key for Chartjs bar chart
- ChartJS Line chart cut off at the top and bottom
- Different color for line segments in ChartJS
More Query from same tag
- how to determine which bar was clicked on a chart js
- Chartjs Bar Chart Y Axis set base starting value to not be 0
- Reference Javascript variable in JSON
- Remove empty spaces created by null values in Chart.js
- Chart.js won't draw the line on chart line
- Integrating TideSDK with C *.dll
- vue-chartjs remove top rectangle (datasets label)
- Chartjs-plugin: How to add a different color to each label?
- How to dynamically set ChartJs line chart width based on dataset size?
- I want to hide the line as shown below
- Angular Chart.js does not show trendline
- Can I add a callback function to the legend while keeping the original functionality?
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- Failing to render chart – "can't acquire context from the given item"
- Unable to get chartjs to draw a chart with dynamic data (variable not hardcoded)
- ChartJS tooltip scrollbar to prevent data overflow?
- chart js bar chart not displaying array
- Chart js label issue in react js
- Laravel displaying a chart from another database connection
- Is it possible to reverse the display order of segments in polar chart?
- How to make ng2-Chart Scrollable for large amount of data sets?
- show xAxes on click
- Trying to update background color on chart.js
- unable to add background color to the canvas using jspdf and chartjs
- Refencing a plugin in ChartJs.Blazor
- Display dataset values on bar ChartJs 2.1.6
- Partitioning radar graph in chart.js by sector
- How to use custom rendering methods of chartJs through ng2-charts angular?
- Chart.js number format
- Add an image as background in ChartJS chart area [Not to canvas]