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?
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?
Share Improve this question edited Mar 12, 2018 at 11:51 Tschallacka 28.7k15 gold badges98 silver badges138 bronze badges asked Aug 12, 2016 at 12:45 RajRaj 8791 gold badge10 silver badges23 bronze badges 1- I found the responses to stackoverflow.com/questions/38624222/… more helpful. – nabrown Commented Mar 13, 2020 at 17:00
1 Answer
Reset to default 17As 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.
You can do it using Chart.js plugins like this :
// 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.