[Solved]-Chartjs Bar Chart Legend-Chart.js

score:0

For the latest Version 2.6.0, it can be done using legendCallback

Set the template for the legends:

  legendCallback: function(chart) {
    var text = [];
    text.push('<ul>');
    for (var i=0; i<chart.data.datasets.length; i++) {
      console.log(chart.data.datasets[i]); // see what's inside the obj.
      text.push('<li>');
      text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + chart.data.datasets[i].label + '</span>');
      text.push('</li>');
    }
    text.push('</ul>');
    return text.join("");
  },

Add html element to target for the location of the legends.

<div id="chart-legends"></div>

Then generate the legends:

document.getElementById('chart-legends').innerHTML = myChart.generateLegend();

Robin Carlo Catacutan 12366

score:1

I have an answer and it is working fine...

var ctx = document.getElementById("canvas").getContext("2d");
                        new Chart(ctx).HorizontalBar(barChartLocData, {
                            responsive: true,
                            scaleFontColor: "#000",
                            showTooltips: false,
                            onAnimationComplete: function() {
                                var ctx = this.chart.ctx;
                                ctx.font = this.scale.font;
                                ctx.fillStyle = this.scale.textColor
                                ctx.textAlign = "right";
                                ctx.textBaseline = "right";
                                this.datasets.forEach(function(dataset) {
                                    dataset.bars.forEach(function(bar) {
                                        ctx.fillText(bar.value, bar.x, bar.y - 5);
                                    });
                                });
                            }
                        });

SaJ 65

score:1

Try this

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };
    var context = document.getElementById('clients').getContext('2d');
    var clientsChart = new Chart(context).Bar(data);

HTML:

 <canvas id="clients" width="450" height="350"></canvas>

http://jsfiddle.net/TZq6q/299/

Sanyami Vaidya 799

score:16

THE BELOW ANSWER IS FOR CHARTJS 1.X

So below is an example of how you can set up a legend using the labels that need to be given which each dataset, using the default legend template all you have to do is call generateLegend() on the chart and then place this on the page

var helpers = Chart.helpers;
var canvas = document.getElementById('bar');
var randomScalingFactor = function() {
  return Math.round(Math.random() * 100)
};
var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      fillColor: "rgba(220,220,220,0.5)",
      strokeColor: "rgba(220,220,220,0.8)",
      highlightFill: "rgba(220,220,220,0.75)",
      highlightStroke: "rgba(220,220,220,1)",
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
      label: "My Second dataset",
      fillColor: "rgba(151,187,205,0.5)",
      strokeColor: "rgba(151,187,205,0.8)",
      highlightFill: "rgba(151,187,205,0.75)",
      highlightStroke: "rgba(151,187,205,1)",
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }]

  }
  // 
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
  animation: false,
});
// 
var legendHolder = document.createElement('div');
legendHolder.innerHTML = bar.generateLegend();

document.getElementById('legend').appendChild(legendHolder.firstChild);

ul {
  list-style: none;
}
ul li {
  display: block;
  padding-left: 30px;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: 14px;
  cursor: default;
  height:20px;
  width: 140px;
  -webkit-transition: background-color 200ms ease-in-out;
  -moz-transition: background-color 200ms ease-in-out;
  -o-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}
li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  border-radius: 5px;
  height:20px
}

li span.bar-legend-text {
  left:25px;
  width:120px;
}
#chart-area > *{
  float:left
    }

<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.min.js"></script>
<div id="chart-area">
  <canvas id="bar" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
  <div id="legend"></div>
</div>

http://jsfiddle.net/masiht/r5g6a3cd/

Quince 14431

[Solved]-Chartjs Bar Chart Legend-Chart.js

Related Query

More Query from same tag