TechQA.

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

698 views Asked by At

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?

morris.js
Original Q&A
1

There are 1 answers

1
Thalles Portilho On

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>

Related Questions in MORRIS.JS

Popular Questions

Trending Questions