morris.js line update ymin

Question

Is there any way to update the ymin of a morris.js line/area? I've tried it with:

chart.ymin = 10

but the ymin is still 0.

When it`s not possible in morris.js, are there any other chart libarys that include such a feature?

Answer 1

Solution 1

Make sure you set the Morris parameter resize to true.

Then, on your action, you can set the ymin, redraw the chart and make sure the chart is well positioned (trigger a window resize):

chart.ymin = 10;
chart.redraw();
$(window).trigger("resize");

Please try the following snippet:

var data = [
   { Date: '2016-01-01', Sales: 10 },
   { Date: '2016-01-02', Sales: 20 },
   { Date: '2016-01-03', Sales: 40 },
   { Date: '2016-01-04', Sales: 5 },
   { Date: '2016-01-05', Sales: 50 }
];

var chart = new Morris.Line({
  element: 'chartLine',
  data: data,
  xkey: 'Date',
  ykeys: ['Sales'],
  labels: ['Sales'],
  resize: true,
  xLabels: 'day',
  parseTime: false
});

$(".ymin").on("click", function() {
  chart.ymin = 10;
  chart.redraw();
  $(window).trigger("resize");
});

<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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div id="chartLine"></div>
<div class="ymin">Set ymin</div>

---

Solution 2

Set the Morris parameter resize to false for your temperature chart.

Make sure you include the Morris CSS available on the Morris GitHub. Without this CSS, hovering the chart will display the data at the bottom of the chart and will hide the x axis on the next data update from the setInterval.

Remove the code trying to get/set the chart height, triggering a window resize and calling the temperature chart redraw.

Finally add the following code in your $(document).ready function:

var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function () {
    delay(function () {
        TemperatureChart.redraw();
    }, 300);
}).trigger('resize');

Please try the following fork of your CodePen: codepen.io/krlzlx/pen/prwMLr