Morris Chart - How to display values for each bar on a "horizontal: true" bars chart?

Question

Morris Chart - How to display values for each bar on a "horizontal: true" bars chart?

698 Views Asked by Thalles Portilho At 24 December 2020 at 19:27

So, I was looking for a way to do this and found this post, but it only works for vertical bars chart. Does anybody knows what changes I need to do on the code so it can work with horizontal chart?

Original Q&A

There are 1 best solutions below

**Thalles Portilho** · Answer 1 · 2020-12-27T02:56:58.220000

Pierre,

Can't get it running =/. Am I missing something?

<!DOCTYPE html>
<html>
<head>

     <!--Morris Chart CSS -->
    <link rel="stylesheet" href="assets/plugins/morris.js-0.6.4/morris.css">
</head>
<body>

    <div id='myfirstchart'></div>

    
    <!--Morris Chart-->
    <script src="assets/plugins/morris.js-0.6.4/examples/lib/raphael.min.js"></script>
    <script src="assets/plugins/morris.js-0.6.4/morris.min.js"></script>

    <script>
        new Morris.Line({
          // 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: '2014', value: 20 },
            { year: '2015', value: 10 },
            { year: '2016', value: 5 },
            { year: '2017', value: 5 },
            { year: '2018', 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']
        });
        
    </script>
</body>
</html>

Morris Chart - How to display values for each bar on a "horizontal: true" bars chart?

There are 1 best solutions below

Related Questions in MORRIS.JS

Trending Questions

Popular # Hahtags

Popular Questions