Chartjs-Changing labels with logo images

by

0👍

Adding an image to the labels is a tricky adjustment, and will require fiddling with chart.js code, as it isn’t natively supported. My best suggestion is to avoid attempts to add your images to the labels themselves.

Best solution for using icons would be one of:

  1. Use images of your own, but place them around the chart in proper positions, and if needed, refer to em in labels.

  2. Use an icon font to insert icons as characters of text. Here’s an example using Font Awesome, using your data (based off of this fiddle):

var randomScalingFactor = function () {
    return Math.round(Math.random() * 100);
};

var barChartData = {
    pointLabelFontFamily: "'FontAwesome'",
    labels: ["\uf000", "\uf001", "\uf002", "\uf003", "\uf004"],
    datasets: [
{
    label: 'USA',
    backgroundColor: "rgba(196,196,196,0.5)",
    data: [0.07,0.02,0.26,0.68,0.21]
}, 
{
     hidden: false,
     label: 'EUROPA',
     backgroundColor: "rgba(125,125,125,0.5)",
     data: [0.09,0.02,0.31,0.74,0.23]
}, 
{
     label: 'CHINA',
     backgroundColor: "rgba(165,157,4,0.5)",
     data: [0.15,0.02,0.38,0.99,0.27]
}]

};

    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive: true,
        scaleFontFamily: "'FontAwesome'"
    });
<script src="http://chartjs.org/assets/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

<div style="width: 75%">
    <span style="font-family: FontAwesome">&#xf015;</span>
    <canvas id="canvas" height="450" width="600"></canvas>
</div>

Leave a comment