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
- How to use two datasets in chart.js doughnut chart?
- ChartJs Not displaying data
- JQuery Datatables overlapped when using column filtering
- React Chart.js Match API data to what Title is displaying, then update chart on data/Title change
- How to display inline values in a stacked bar chart with Chart.js?
- Price history with chart js
- How to set 2 y-axis title (and/or label) on chartjs?
- How to make ChartJS not cut off tooltips?
- Center point labels between ticks (Polar Area Chart JS)
- tooltip messes up bar chart in Chart.js
- Charts doesn't appear
- Have the current zoom information in chart.js with zoom plugin
- generator-angular-fullstack and angular-chart.js not displaying charts
- ng2-chart tooltip position change option?
- How to plot data coming async in a chartjs chart
- Using click event handler prevents tooltips from displaying on hover
- How do I use my chart.js line chart with handlebars?
- Data not fully displaying on bar chart
- Modify the information box of the scatter chart in Chart.JS
- ChartJs custom tooltip position
- Adding images/icons to specific coordinates in chart.js
- Chart.js - Avoid line to goes to zero and remove dot for this situation
- How to apply data dynamically on initialisation for chart.js in angular?
- Angular 2 ng2-charts donut add text
- "The radius provided (-0.5) is negative" when used with Modal
- Display ellipsis for null or empty values in the bar chart using Chart.js
- Chartjs inverted bars when negative value
- Cannot create chart on react element
- I'm new to node.js, and I'm working on getting a pie chart working
- Line Chart with null values: How to keep Lines connected?