score:2
this can be achieved by combining chartjs-plugin-datalabels with chartjs-plugin-labels as follows:
new chart(document.getelementbyid('mychart'), {
type: 'bar',
data: {
labels: ['2009', '2010', '2011', '2012'],
datasets: [{
label: 'my first 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: {
datalabels: {
anchor: 'end',
align : 'start'
},
labels: {
render: 'image',
textmargin: -60,
images: [
null,
null,
{
src: 'https://i.stack.imgur.com/9emtu.png',
width: 20,
height: 20
},
null
]
}
},
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/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="mychart" width="10" height="5"></canvas>
Source: stackoverflow.com
Related Query
- Display image on bar chart.js along with label (chartjs-plugin-datalabels)
- add a unit to label with chartjs plugin datalabels
- ChartJS - Draw chart with label by month, data by day
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to display inline values in a stacked bar chart with Chart.js?
- ChartJS bar chart with legend which corresponds to each bar
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJs line chart - display permanent icon above some data points with text on hover
- Stacked horizontal bar chart along total count with chart.js
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- ChartJS horizontal chart display legend on each bar
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to display chart using Chartjs with JSON data in Laravel
- Display Bar chart values in the graph - ChartJS
- Chartjs with Vue, Bar Chart Border Radius not working
- Bar chart with min height and zero values - ChartJs
- Set fixed label size for grouped bar chart in angular Chartjs
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Stacked bar chart with chartjs with included values
- How do I display two datasets on a single chart with chartjs
- Chartjs v2.7 - combo chart with time-series (financial) data; bar width's are irregular
- How to remove a label in top of bar in chartjs chart
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- Angular Chartjs Overlapping Bar Chart with Chartjs ver 2.7
- chartjs display data in one bar line with 3 different data sets in 3 different colors
- how to write labels along with data on top and bottom of each stack in bar chart
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Chartjs display multiple info with different units in label
- ChartJS 2.7.3 stacked bar chart with overlap
More Query from same tag
- Pie Chart using chart.js not showing up but bar charts are?
- How to change colours for Angular-Chart.js
- Chartjs pie chart not showing from dynamic data
- Chart.js chart.update() method is not doing anything
- How to replace data value(js) with a datatable value?
- chart.js control space between/size of gridlines
- How do I type string in the tooltip in Chart.js?
- ChartJS doughnut chart not displaying colours
- Access a chart in a different function
- moment.js is not loading before chart.js in Firefox extension
- Chart.js padding not working for ScaleLabel
- Chart.js - how to make proportional intervals on X axis on line chart
- Ionic using multiple chart.js canvas in the same page
- ChartJS, updating chart type does not update xAxis properly
- how to make chartjs columns smaller in width for bar chart?
- Create a chartjs pie chart using json data
- ChartJS "Unable to get property 'getTime' of undefined or null reference"
- Changing data when click button in chart.js
- Bar charts not getting displayed correctly when bar is below zero (chart.js)
- Two chartjs charts on page throwing data undefined error
- Chartjs: Why do I have 2 Y Axis labels?
- Incorrect time chart Chart.js
- Laravel query builder for Charts.js
- ChartJS customize left and bottom axe border
- Change style of hover and tooltip in chartjs or ng2-charts
- Chart.js Line Chart x-Axes label rounding
- Chart.js xAxes Date Labels are altered based on screen width
- Pushing API Data into Chart.js
- Chart.JS Get Json data for chart and return dataset where a type equals a certain type
- Chart.js v2 - combined stacked bar chart and 2 unstacked lines