16

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).

Chart examples

Is it possible in ChartJs?

Tschallacka
  • 27,901
  • 14
  • 88
  • 133
Raj
  • 879
  • 1
  • 10
  • 23
  • I found the responses to https://stackoverflow.com/questions/38624222/chart-js-custom-image-for-each-point/60674490#60674490 more helpful. – nabrown Mar 13 '20 at 17:00

1 Answers1

17

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.

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.

tektiv
  • 14,010
  • 5
  • 61
  • 70
  • Is there a way to set the opacity of this image? I tried adding style="opacity: 0.5;", but it seems to just take the raw image. – Jonathan Nov 20 '18 at 23:33
  • I've got this somewhat working. The image only displays successful on hover or click. I'm using react-chart-js. any suggestion? how can i get access to afterupdate? – Jereme Aug 05 '20 at 11:48
  • [Seems to be similar](https://github.com/jerairrest/react-chartjs-2#chartjs-object) as the original library – tektiv Aug 06 '20 at 07:10