Search code examples
morris.js

Can morris.js shows circles only on hover


I'm using morris.js to build charts, but I'm stuck on a problem that I can't figure it out. Is there a way in morris.js to make circles appear only on hover? I read the documentation, but I did not see such an option. To be sure I decide to ask you guys.


Solution

  • You can set the pointSize to 0. This way, the points will only appear on hover. Run the code snippet to view the result.

    Morris.Area({
      element: 'chart',
      data: [
        { y: '2006', a: 100, b: 90 },
        { y: '2007', a: 75,  b: 65 },
        { y: '2008', a: 50,  b: 40 },
        { y: '2009', a: 75,  b: 65 },
        { y: '2010', a: 50,  b: 40 },
        { y: '2011', a: 75,  b: 65 },
        { y: '2012', a: 100, b: 90 }
      ],
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['Series A', 'Series B'],
      pointSize: 0
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
    
    <div id="chart"></div>