score:17
Accepted answer
You can do it using Chart.js plugins like this :
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.
Source: stackoverflow.com
Related Query
- Adding Image inside Linechart points in ChartJs
- Adding image on the top of bar in chartjs
- How to add ChartJS code in Html2Pdf to view image
- How to hide some points inside my line graphic in React ChartJS 2?
- chartjs maintain points position, put image alongside with label
- Adding text inside 2 different Doughuts chartjs
- Hide points in ChartJS LineGraph
- Skip decimal points on y-axis in chartJS
- chartjs datalabels change font and color of text displaying inside pie chart
- Chartjs linechart with only one point - how to center
- ChartJS : How to leave just points without lines
- Chartjs + jsPDF = Blurry image
- Chartjs 2 scaling lots of data points
- Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
- Chartjs Line Color Between Two Points
- ChartJS won't draw graph inside bootstrap tab until window resize
- ChartJS bar not showing up for simple data points
- ChartJs line chart - display permanent icon above some data points with text on hover
- Show image instead a point in a ChartJS scatter plot
- Chartjs adding icon to tooltip and label
- How to make points in chartjs draggable?
- Add Commas to ChartJS Data Points
- ChartJS - handling of overlapping points in line chart
- ChartJS add text to canvas in linechart
- Change font family of labels in piechart and linechart in chartjs
- Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show
- why is the background black when with Chartjs export to a image
- chartJS - points overplotting, jittering, noise?
- Points cut at half at the edges of top and bottom, at chartjs
- ChartJS - Adding legend title into tooltip title
More Query from same tag
- Bootstrap grid not working with canvas
- Charts.js: Using an object to graph
- How can I force the ".0" portion of a value to explicitly display (Chart.JS)?
- How to make the size of pie chart fixed without using canvas (chart.js)
- Render Chart on second template by clicking icon on the first template
- Chart.js - How to offset bars from ZeroLine
- Embed <canvas> tag in Laravel Markdown?
- Chartjs - data format for bar chart with multi-level x-axes
- How can I add background color of length bars in chart (chartJS)?
- How to include many datapoints to plot in chart.js
- Multiple Chart JS percentage labels
- "Inline" labels in ChartJS
- ChartJS: Mapping Non numeric Y and X
- How to use Utils from Chartjs on Django
- How can I format the x-axis using a timestamp via chart.js?
- Make time series show last date in axis?
- Chartjs: I only want left and right padding in pie chart
- Time series line chart is not displayed
- fill: 'origin' property does not work for my chart
- How do I horizontally center a line chart when their is a single X-Axis value?
- How to filter Chart JavaScript Dashboard by Year through dropdown after the MySQL count query?
- Where is the documention for the chart.js Chart constructor?
- Chartjs show seconds on the x axis and volume on the y
- Laravel passing orders to Chart.js
- Chartsjs only showing two data points
- Can I add some variables to my chart.js in page know that variables?
- Chart.js - is there a way to extend an existing scale?
- Default font size doesn't change ChartJS
- Include Percentage In Legend
- Charts.JS - Too Many Charts? - Loading Issue