chartjs: set default min for the line chart - chart.js

Question

I have a line chart which is drawing at its default min. I have changed the min of the chart on the button click and then update it. Problem is i want to toggle on the button click. Like if i have set the min on the button click. by clicking again it should change again back to the normal min. But in that it did not have a min at all in the default case.
I am setting this like
$('#action').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = -50;
myLineChart.update();
})
This is my Jsfiddle

Answer 1

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55, 40],
}]
};
var option = {
legend: false,
title: {
display: true,
}
};
var myLineChart = Chart.Line('myChart', {
data: data,
options: option
});
$('#action').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = -50;
myLineChart.update();
$("#action2").show();
$("#action").hide();
})
$('#action2').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = 0;
myLineChart.update();
$("#action").show();
$("#action2").hide();
})
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<button id="action" style="display: block;">action</button>
<button id="action2" style="display: none;">action</button>
You can split the task by adding another button.
Please Add one more button on HTML with same name but display none.
<button id="action" style="display: block;">action</button>
<button id="action2" style="display: none;">action</button>
Add one More function
$('#action').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = -50;
myLineChart.update();
$("#action2").show();
$("#action").hide();
})
$('#action2').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = 0;
myLineChart.update();
$("#action").show();
$("#action2").hide();
})
OnClick you can hide / show (toggle)