score:4
You can place images on top of individual bars using chartjs-plugin-labels.
Please have a look at the following runnable code snippet:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'My Dataset',
data: [25, 59, 80, 76],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
labels: {
render: 'image',
textMargin: 10,
images: [
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
layout: {
padding: {
top: 30
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>
Source: stackoverflow.com
Related Query
- Adding image on the top of bar in chartjs
- how to show bar value on the top of each bar in chartjs
- Show Count on top of the bar graph - ChartJS
- Is There any way to show image on top of the stacked bar, Am getting image on every color Instead of that i need only on top of each bar
- Adding Image inside Linechart points in ChartJs
- line graph spot in the top middle of the bar graph
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Border radius for the bar chart in ChartJS
- How to change the labels to the image (icon) in bar chart.js
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- Grouping the object by key for Chartjs bar chart
- ChartJS Line chart cut off at the top and bottom
- Chart.js add icon at the top of bar
- Chart JS display Data Value on the top of the Bar
- Add a custom label to the top or bottom of a stacked bar chart
- How to add ChartJS code in Html2Pdf to view image
- why is the background black when with Chartjs export to a image
- Points cut at half at the edges of top and bottom, at chartjs
- ChartJS align axis label to the top
- ChartJS bar chart - trigger hover even when the cursor is outside of the bar
- How to set the chartjs bar graph scale to the highest value in the result data
- Render chartjs and export image to data not in the DOM
- Display Bar chart values in the graph - ChartJS
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- ChartJS - Show values in the center of each bar
- Chartjs 2 - Stacked bar with marker on top
- How to show the chartjs bar chart data values labels as text?
- The bar that contains a low value is almost invisible on the chartjs
- How to add labels on top of the chart bar with Chart.js 2
- react-chartjs-2 bar touches the top
More Query from same tag
- how do I make chart.js smaller? (html, chart.js)
- Chart.js not drawing on mobile (safari/chrome) fine on desktop
- Loop through array of objects in Node
- onZoom not triggered when zooming
- Chart in other module
- Updating Chartjs Data with Response from POST Call?
- add a unit to label with chartjs plugin datalabels
- base chart slice color on series value?
- Convert FirestoreCollection into an array?
- Chart.js: How to group legends of dataset? So one toggle for multiple datasets?
- charts js, doughnut chart not rendering tooptips correctly
- Getting chart js bar chart to fill window
- How to Render Chart Datasets in Vue?
- Javascript and Chart.js not taking user input assuming it is a variable scope issue
- remove strikethrough behavior in chart.js bar chart
- chart.js color not rendering
- Multiple line types in ChartJS
- Plot dataset from MySQL with Chart.js and PHP
- Chart.js legend is undefined
- Detect if the click is in bar or outside of bar in ChartJS
- Hiding unused axis in ng2-charts
- Why is only a single chart of three updated with react-chartjs-2?
- Can I interpret Django object values as JSON data within the JS script in my HTML?
- How to make label always visible on DoughnutChart.js
- Filter a legend Item with Chartjs.org V2.7
- How to apply image on each bubble in chartjs?
- Bootstrap 3 tabs & Chart.js - charts not loading on tabs
- Tilting the labels of the x axis to some degrees in chart.js
- Chart.js canvas resize
- how to disable last/max value shown on x axis in chart js?