score:5
Looking at the Chart.js source code it appears that labels are rendered using the fillText
command. fillText(text, x, y [, maxWidth])
only accepts a plain text string and so your HTML string will be render as plain text and all tags will be ignored.
One possible option would be to consider modifying the Chart.js code to use a <foreignObject>
(see this article on MDN and this one which it's based on). For example:
ctx.translate(xPos,(isRotated) ? this.endPoint + 12 : this.endPoint + 8);
ctx.rotate(toRadians(this.xLabelRotation)*-1);
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml'>" +
label +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }
ctx.restore();
(Much of this code is a straight copy of the demo presented here by Robert O'Callahan, simply modified to accept a label string and replace the existing Chart.js x label drawing code.)
Source: stackoverflow.com
Related Query
- Getting the HTML code of a chart created by chart.js
- Limit labels number on Chart.js line chart
- Chart.js Show labels on Pie chart
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- chart.js: Show labels outside pie chart
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chart JS data labels getting cut
- How to display Line Chart dataset point labels with Chart.js?
- HTML in Chart.js labels
- Chart JS Show HTML in Tooltip
- Making the labels responsive in chart js
- Html chart does not fit a small Android WebView
- Chart.js - Draw bar chart with multiple labels
- Adding Chart.js line chart to Jinja2/Flask html page from JS file
- Chart JS grouped sub labels
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- Changing x axis labels in Chart.js line chart
- How to display data labels outside in pie chart with lines in ionic
- Line chart with large number of labels on X axis
- Center point labels between ticks (Polar Area Chart JS)
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- How to align Chart.JS line chart labels to the center
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to display the labels in doughnut chart using ng2 charts?
- Chart.js HTML custom legend issues with doughnut chart
- Chart.js Bubble chart with custome X-axis labels
- Change labels colors for radar chart js
- ChartJS: Show all labels of a mixed chart in the tooltip
- Chart.js Radar Chart How to Remove Outer Labels
- ChartJS 2.0 - Huddle labels on pie chart
More Query from same tag
- Set animation dynamically in Chart.JS
- Chart not rendering on ChartJS
- chart.js and asynchronous loading
- Chart.js Update to X Axis Not Updating
- Chart.js not showing value on top of bars
- Chart js - set width to a specific bar
- Show all values in Chart js y axis
- Using a prepared dataset in chart.js
- chartJS line chart not plotting values that are less than minY
- How to make custom text appear underneath each bar in chartjs bar chart?
- How to Integrating Chart.js with Angular 7 with Data from database
- Calling MouseLeave chartJs Angular
- Extend chart.js horizontal bar graph to include a vertical line
- How to display the labels in doughnut chart using ng2 charts?
- How to increase line chart width in ng2-charts?
- Charts js and laravel: Render chart after passing in json data
- Can't make chart with Chart.js
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- Update/re-render Charts.js in Angular 4
- ChartJS custom bar chart
- chart.js bar chart datalabel vanishes on hovering over chart
- How to display data on hover inside doughnut chart in Angular Chart?
- Chart.js - Where do I find which components should be registered?
- Y scaling relative to the max value in my ChartJS chart
- Chart.js Tooltips customization
- Chart.js, Javascript, unable to sum a data set. Javascript return NaN and I am not sure why
- Gantt Chart Timeline Chart js 3
- How to zoom charts in chart.js using angular 7
- Chart.js - Shift/Stagger labels horizontally (for x axis) instead of rotating