CODEWITHSUNDEEP
morris.js
user4900326
user4900326

Reputation:

How to show a label value that is not present in ykeys in morris bar chat?

While hovering on the chat it showing the total orders and it is fine. It is showing because list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option). I want to show the amount as well while hovering on the chat and not adding it on the ykeys. Below is my code please check.

 var order_graph_chat = [
    {order_date: '01', count: 10, amount: 9000},
    {order_date: '02', count: 75, amount: 6500},
    {order_date: '03', count: 50, amount: 4000},
    {order_date: '04', count: 75, amount: 6500},
    {order_date: '05', count: 50, amount: 4000},
    {order_date: '06', count: 75, amount: 6005},
    {order_date: '07', count: 10, amount: 9000},
    {order_date: '08', count: 75, amount: 6500},
    {order_date: '09', count: 50, amount: 4000},
    {order_date: '10', count: 75, amount: 6500},
    {order_date: '11', count: 50, amount: 4000},
    {order_date: '12', count: 75, amount: 6005},
];
$(function () {
    "use strict";
    //BAR CHART
    var bar = new Morris.Bar({
        element: 'bar-chart',
        resize: true,
        data: order_graph_chat,
        barColors: ['#00a65a', '#f56954'],
        xkey: 'order_date',
        ykeys: ['count'],
        labels: ['Total Orders'],
        hideHover: 'auto'
    });
});

Below is the image of that chat with hovering on it. I just want to show the amount as well.

Bar Chart Image

Can anyone help me to do this. Thanks in advance

Upvotes: 2

Views: 584

Answers (1)

Pierre
Pierre

Reputation: 1256

You can try to use the function hoverCallback as follow:

hoverCallback: function(index, options, content) {
      var data = options.data[index];
      content += 'Amount: '+data.amount;
      return content;
  },

Upvotes: 1

Related Questions