{"id":693,"date":"2019-03-27T02:51:48","date_gmt":"2019-03-27T02:51:48","guid":{"rendered":"https:\/\/www.kolkataonweb.com\/code-bank\/?p=693"},"modified":"2019-03-12T12:01:59","modified_gmt":"2019-03-12T12:01:59","slug":"legends-in-morris-chart","status":"publish","type":"post","link":"https:\/\/www.kolkataonweb.com\/code-bank\/miscellaneous\/legends-in-morris-chart\/","title":{"rendered":"Legends in Morris Chart"},"content":{"rendered":"

With help from this article https:\/\/github.com\/morrisjs\/morris.js\/issues\/346<\/p>\n

This is about adding Legends to Morris charts. Though Morris chart shows legend on hovering on the graphs, but I wanted to show a legend permanently on one corner of the chart area.<\/p>\n

Below are the codes. It is mostly plug and play code<\/p>\n

The div in which the chart will be displayed<\/p>\n

<div class=\"box-body chart-responsive\">\r\n    <div id=\"visitor_legend\" class=\"bar-chart-legend\"><\/div> <!-- the legend area -->\r\n    <div class=\"chart\" id=\"bar-chart\" style=\"height: 300px;\"><\/div> <!-- the chart area -->\r\n<\/div><\/pre>\n
The CSS<\/p>\n
<style>\r\n.bar-chart-legend {\r\n\tdisplay: inline-block;\r\n\tright: 25px;\r\n\tposition: absolute;\r\n\ttop: 8px;\r\n\tfont-size: 10px;\r\n}\r\n\r\n.bar-chart-legend .legend-item {\r\n\tdisplay: block;\r\n}\r\n\r\n.bar-chart-legend .legend-color {\r\n\twidth: 12px;\r\n\theight: 12px;\r\n\tmargin: 3px 5px;\r\n\tdisplay: inline-block;\r\n}\r\n<\/style><\/pre>\n
The JS code<\/p>\n
\/\/ Legend for Bar chart\r\nbar.options.labels.forEach(function(label, i) {\r\n\tvar legendItem = $('<span class=\"legend-item\"><\/span>').text( label).prepend('<span class=\"legend-color\">&nbsp;<\/span>');\r\n\tlegendItem.find('span').css('backgroundColor', bar.options.barColors[i]);\r\n\t$('#visitor_legend').append(legendItem) \/\/ ID pf the legend div declared above\r\n});<\/pre>\n
\n
Morris charts documentation https:\/\/morrisjs.github.io\/morris.js\/lines.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
With help from this article https:\/\/github.com\/morrisjs\/morris.js\/issues\/346 This is about adding Legends to Morris charts. Though Morris chart shows legend on hovering on the graphs, but I wanted to show a legend permanently on one corner of the chart area. Below are the codes. It is mostly plug and play code The div in which the… Continue reading Legends in Morris Chart<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,1,3],"tags":[189,190,187,188],"class_list":["post-693","post","type-post","status-publish","format-standard","hentry","category-jquery","category-miscellaneous","category-php","tag-chart","tag-js-charts","tag-morris-charts","tag-morris-js","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/comments?post=693"}],"version-history":[{"count":2,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/693\/revisions"}],"predecessor-version":[{"id":695,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/693\/revisions\/695"}],"wp:attachment":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/media?parent=693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/categories?post=693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/tags?post=693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}