score:6
Accepted answer
Yes, there is an open issue on Chart.js github repo, however you can achieve your goal extending draw function:
var chartData = {
"labels": ["Italy", "Germany", "Netherlands", "France", "Spain"],
"datasets": [{
"data": [65, 59, 80, 81, 56],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.5)", "rgba(255, 205, 86, 0.5)", "rgba(75, 192, 192, 0.5)", "rgba(54, 162, 235, 0.5)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
"borderWidth": 1
}]
};
for (var i in chartData.labels) {
var lab = chartData.labels[i];
var $img = $("<img/>").attr("id", lab).attr("src", "https://www.free-country-flags.com/countries/" + lab + "/1/tiny/" + lab + ".png");
$("#pics").append($img);
}
var originalBarController = Chart.controllers.bar;
Chart.controllers.bar = Chart.controllers.bar.extend({
draw: function() {
originalBarController.prototype.draw.call(this, arguments);
drawFlags(this);
}
});
function drawFlags(t) {
var chartInstance = t.chart;
var dataset = chartInstance.config.data.datasets[0];
var meta = chartInstance.controller.getDatasetMeta(0);
var y0 = chartInstance.scales.y0.top + chartInstance.scales.y0.height;
ctx.save();
meta.data.forEach(function(bar, index) {
var lab = bar._model.label;
var img = document.getElementById(lab);
ctx.drawImage(img, bar._model.x - 10, y0 - 6, 20, 12);
ctx.stroke();
});
ctx.restore();
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
"type": "bar",
"data": chartData,
"options": {
legend: {
display: false
},
"scales": {
"yAxes": [{
id: "y0",
"ticks": {
"beginAtZero": true
}
}]
}
}
});
#myChart {
background-color: #ffffff;
border: 1px solid #ff0000;
}
#pics {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart" height="200" width="400"></canvas>
<div id="pics"></div>
Here is also a jsfiddle: https://jsfiddle.net/beaver71/0zderk1p/
Source: stackoverflow.com
Related Query
- How to use icon as legend in Chart.js?
- chart js how to fill legend box with colour
- How to use PrimeNg Chart of Width and Height?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Chart js: how can I align the legend and the title
- Angular chart how to show the legend data value by default along with legend name
- How do I use my chart.js line chart with handlebars?
- How to use segment property to color line / border color based on value in chart js?
- How to use JSON data in creating a chart with chartjs?
- how to add percentage value to legend field in pie chart using chart.js
- how to add legend in pie chart
- How to use set the color for each bar in a bar chart using chartjs?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to use Real time chart in react?
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How can i give the full Legend a background color in chart js?
- how to reduce list chart to one and use select dropdown to show selection without refresh page?
- ChartJS Pie Chart How default just show 2 legend datas
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- How to show/hide animation when legend clicked chart js
- How to use forEach loop on my array to plot x and y variables on my chart (Chart.js)
- How to print a chart rendered by code
- How to use plugins in chartjs and laravel chart consoletvs/chartsjs
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How to remove the Legend of chart from angular Chart.js
- how to change point style legend to diamond in chart js
- ChartJS - How to add Text between Pie Chart and Legend
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- How do I destroy/update Chart Data in this chart.js code example?
More Query from same tag
- Saving ChartJS chart showing all tooltips
- chart js, loading data dynamically
- Chart.js ignore options
- Chart JS Crosshair - Linked Charts without linked Legends
- how can I show only 2 numbers on the xAxe in Chartjs having more than two numbers on the chart? (line chart)
- How can I rotate a pie chart in charts.js?
- Chart.js setting maximum bar size of bar chart
- How to generate multi bar chart in Chart.js with php & sql
- Ng2-charts crosshair plugin not working in Angular
- Chartjs - first x-axis tick is not displayed
- Change position of Chart.js tick labels
- chart.js how to force min and max y axis values
- PHP/Laravel - Chartjs implode does not function
- chart.js how to configure the lable for both axis
- Bar Graph, chart.js PHP Will Not Load
- How to send data from struts2 to a javascript function to draw a chart
- ChartJS for 1 and 0 values display true or false
- How to make one datefilter for multiple charts on one webpage?
- How to use segment property to color line / border color based on value in chart js?
- Adding images/icons to specific coordinates in chart.js
- Is it possible to add more attributes to segement in a Doughnut chart of Chart JS?
- warning in chartjs/react-chartjs options assignment if setting type:'time'
- Display Charts based on year select in django
- System.Collections.Generic.List`1[System.String] instead of data
- Charting Commodity Data - Issue getting the dates and values in JSON
- Doughnut spacing
- charts.js: how to get the legend colors of the labels
- Chart.js v2 - combined stacked bar chart and 2 unstacked lines
- Label is not showing in ChartJS
- Search box to show information in line chart