CODEWITHSUNDEEP
javascriptjquerymorris.js
Umair Khan
Umair Khan

Reputation: 283

Remove Dot From the Y-axis Morris Line Chart

I have implemented the Morris Line Chart with the following code and this is working well.

But I need some modifications in the second line name with the goal. You have seen dots come on every month. I want to remove these dots from that line so that I will be a straight line.

Morris.Line({
  element: 'line-chart',
  data: JSON.parse(GraphData),
  xkey: 'title',
  ykeys: ['goal', 'actual'],
  labels: ['Goal', 'Actual'],
  xLabelFormat: function(x) { // <--- x.getMonth() returns valid index
    var month = months[x.getMonth()];
    return month;
  },
  dateFormat: function(x) {
    var month = months[new Date(x).getMonth()];
    return month;
  },
  resize: true,
        lineColors: ['#ecb201', '#1B17BB'],
        gridTextFamily: "'Nunito', sans-serif",
        gridTextWeight: '300',
        gridTextSize: 11,
        gridTextColor: '#090b0d',
        pointSize: 4,
        lineWidth: 2,
        pointStrokeColors: ['#ffffff', '#ffffff'],
});

Morris Line Chart

Upvotes: 1

Views: 1812

Answers (2)

Punit Gajjar
Punit Gajjar

Reputation: 4987

use this script after you render the chart. 

$(document).ready(function(){
        $('circle[fill="#ecb201"]').each(function(i,el) {
            //console.log($(this).attr("r" , 0));
            $(this).removeAttr("r");
            $(this).removeAttr("cy");
            $(this).removeAttr("cx");

        });
    });

but on hover it will show those points again . thats the problem only.

Upvotes: 1

MaoStream
MaoStream

Reputation: 188

Try to change pointSize to 0. Set pointSiZe: 0 at the begining 

Morris.Line({
    element: 'line-chart',
    pointSize: 0, ....
)}

Upvotes: 5

Related Questions