I'm using morris.js library to generate charts.
I want to remove the hover legends from the chart. Please check the picture below for better understanding. How can I remove them? Any idea to fix it? Thanks in advance.
new Morris.Bar({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{year: '2008', value: 20},
{year: '2009', value: 10},
{year: '2010', value: 5},
{year: '2011', value: 5},
{year: '2012', value: 20}
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="myfirstchart" style="height: 250px;"></div>
To disable the hover legend, use the hideHover
property and set it to 'always'
.
The hideHover
property accepts the following values:
false
(boolean) - always show a hover legendtrue
(boolean) or 'auto'
(string) - only show the hover legend, when the mouse cursor is over the chart'always'
(string) - never show a hover legendnew Morris.Bar({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{year: '2008', value: 20},
{year: '2009', value: 10},
{year: '2010', value: 5},
{year: '2011', value: 5},
{year: '2012', value: 20}
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value'],
// Remove hover legend
hideHover: 'always'
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="myfirstchart" style="height: 250px;"></div>
You can also customize the hover legend by assigning a callback
function to the hoverCallback
property:
new Morris.Bar({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{year: '2008', value: 20},
{year: '2009', value: 10},
{year: '2010', value: 5},
{year: '2011', value: 5},
{year: '2012', value: 20}
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value'],
// Customized hover legend via a callback
hoverCallback: function (index, options, content, row) {
return 'Legend ' + index + '<br> on year ' + row.year + '<br> with value ' + row.value;
}
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="myfirstchart" style="height: 250px;"></div>