I'm developing a project using ChartJs. I am trying to add icon image inside the line chart
instead of points
.
I'm attaching an image in which I demonstrate the above requirements. In that image, there is a ChartJs image and a reference image. I would like to add an image inside the line chart of ChartJs exactly like in the reference image(sun and cloud icon).
Is it possible in ChartJs?
Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do: let chart = new Chart(ctx, { type: 'line', data: data, options: { layout: { padding: { left: 50 } } } }); Copied!
Accessible ChartsChart. js charts are rendered on user provided canvas elements. Thus, it is up to the user to create the canvas element in a way that is accessible. The canvas element has support in all browsers and will render on screen but the canvas content will not be accessible to screen readers.
The Utils file contains multiple helper functions that the chart. js sample pages use to generate charts.
As said in the Chart.js line chart data structure (pointStyle attribute) :
pointStyle
String, Array< String >, Image, Array< Image >
The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using drawImage.
So you just need to edit your chart and put an image instead of the default circle
in the pointStyle
attribute of a specific data.
// Variables 'sun' and 'cloud' are created before with `new Image()`
Chart.pluginService.register({
afterUpdate: function(chart) {
chart.config.data.datasets[0]._meta[0].data[7]._model.pointStyle = sun;
chart.config.data.datasets[1]._meta[0].data[2]._model.pointStyle = cloud;
}
});
And will give you this result.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With