How to make legends?

[shgninc]

Hi there. Thanks for this project.
How can i make a legend for may Bar chart?

[sudodoki]

Hello. What kind of legend do you want to have? You can use regular css & html stuff to display legend.

[shgninc]

Can you show me a simple example?

[sudodoki]

Since you didn't specify, what exactly you need, I just put up a bacis sample.
http://jsfiddle.net/e97YJ/1/

[sudodoki]

We might consider introducing some sort of callback with color & label being passed as arguments to make it easier to draw legend. @oesmith, what's your opinion on this?

[oesmith]

I'd rather users built their legends using their own data, as supplied to the barColors and labels attributes of the config object on the Morris.Bar constructor.

I don't see much value in a callback that gives a user back the exact same data that they've already supplied to us.

Does that make sense?

[sudodoki]

Possible reasoning for callback:

1. When using default colors and thus not having your own reference for the colors being used.
2. Incapsulation (not relying on options property being available as a property of your chart instance - what if we change the implementation and make options part of a closure?).
3. Unified API across chart types (right now colors are set through barColors. colors [Donut], lineColors ).

[thedavidscherer]

@oesmith The callback should pass the colors and labels back to make building these on the fly in a dasboard-y way simpler. I can write a gist if you want something more detailed.

[shgninc]

thank you all.

[gamov]

Thank you @sudodoki for your snippet. Very useful if the graphs are made to be printed.

[shahriarhossain]

@sudodoki : I am in need of legend in Donut Charts.

any code snippet will help

[dshemendiuk]

@shahriarhossain check this https://jsfiddle.net/x1q12so2/

[kavin-90]

@shahriarhossain I want same as you too. Anyone got solution?

[Kasara]

Because dima-sh has posted nearly the whole thing (thanks!),
I completed (and simplified) it:

https://jsfiddle.net/h0fjm80n/

No more css. Also it shows the value right of the text.

[coolananth]

how about for Bar chart??

[dsilva0101]

Hello,

How can I change the size font of legend in line chats?

[ocramot]

@coolananth you can do it with bar charts this way:
https://jsfiddle.net/9zwzzqu7/2/

[ravistm]

For Bar Chart full code: (this will put the legend at the top right corner of the bar chart div)

HTML

<div class="grid-body no-border">
 <div id="visitor_legend" class="bar-chart-legend"></div>
 <div id="visitors_bar_chart" style="height:250px"></div>
</div>

JS CODE

var browsersChart = Morris.Bar(config);

    // Legend for Bar chart
    browsersChart.options.labels.forEach(function(label, i) {
        var legendItem = $('<span class="legend-item"></span>').text( label).prepend('<span class="legend-color">&nbsp;</span>');
        legendItem.find('span')
          .css('backgroundColor', browsersChart.options.barColors[i]);
        $('#visitor_legend').append(legendItem)
   });

CSS:

.bar-chart-legend {
display: inline-block;
right: 25px;
position: absolute;
top: 8px;
font-size: 10px;
}

.bar-chart-legend .legend-item {
display: block;
}

.bar-chart-legend .legend-color {
width: 12px;
height: 12px;
margin: 3px 5px;
display: inline-block;
}