set() - Sets the value for specified property of Navigator - 0 | JSFiddle Sample Code

set() - Sets the value for specified property of Navigator - 0 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

<div id="chartContainer" style="height: 430px; width: 100%;"></div>
<button id="setBackgroundColor">Set minimum</button>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/stockcharts/methods/navigator/set/" target="_blank" title="set() - Sets the value for specified property of Navigator ">https://canvasjs.com/docs/stockcharts/methods/navigator/set/</a></div>

JavaScript

window.onload = function () {
  var dataPoints = [];

  var stockChart = new CanvasJS.StockChart("chartContainer",{
    title:{
      text: "Updating Navigator Background Color"
    },
    charts: [{
      axisY: {
        title: "LTC/USD",
        prefix: "$"
      },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,###.00",
        dataPoints: dataPoints
      }]
    }],
    rangeSelector: {
      enabled: false
    },
    navigator: {
      enabled: true,
      height: 100,
      slider: {
      	minimum: new Date(2018, 07, 01),
        maximum: new Date(2018, 09, 01)
      }
    }
  });
  
  $.getJSON("https://canvasjs.com/data/docs/ltcusd2018.json", function(data) {  
    for(var i = 0; i < data.length; i++){
      dataPoints.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
    }	
    stockChart.render();stockChart.render();
  });
  
  document.getElementById("setBackgroundColor").addEventListener("click",function(){
    stockChart.navigator.slider.set("minimum", new Date(2018, 05, 01));
    console.log(stockChart.navigator.slider.get("minimum"));
  });

}