New to Kendo UI for jQuery? Download free 30-day trial

Exclude Navigator from Stock Chart Export


Product Grid for Progress® Kendo UI®
Product Version 2018.2.516


How can I export the Stock Chart to a .png file without exporting the navigator to the image?


Right before the export begins, hide the navigator and make it visible again after the export completes.

To maintain the navigator settings after it was zoomed in or out:

  1. Use the select method of the navigator to get the from and to values when the export starts.
  2. Include the from and to values in the select property of the navigator by using the setOptions method.
<div id="example">
  <div class="box wide">
    <h4>Export Stock Chart</h4>
    <div class="box-col">
      <button class='export-image k-button'>Save as Image</button>
  <div class="demo-section k-content wide">
    <div id="stock-chart"></div>
    $(".export-image").click(function() {
      var chart = $("#stock-chart").getKendoStockChart();          
      var navi = chart.navigator;
      var from =;
      var to =;

      chart.setOptions({ navigator: { visible: false, select: {from: from, to: to} } });
        chart.exportImage().done(function(data) {
            dataURI: data,
            fileName: "chart.png"
        chart.setOptions({ navigator: { visible: true, select: {from: from, to: to} } });
      }, 1000);
    function createChart() {
        pdf: {
          fileName: "Kendo UI Stock Chart Export.pdf",
          proxyURL: ""
        dataSource: {
          transport: {
            read: {
              url: "",
              dataType: "json"
          schema: {
            model: {
              fields: {
                Date: { type: "date" }
        title: {
          text: "The Boeing Company\nNYSE:BA"
        dateField: "Date",
        panes: [{
          title: "Value"
        categoryAxis: {
          pane: "volumePane"
        valueAxes: [{
          line: {
            visible: false
        series: [{
          type: "candlestick",
          openField: "Open",
          highField: "High",
          lowField: "Low",
          closeField: "Close"
        navigator: {
          series: {
            type: "area",
            field: "Close"
          select: {
            from: "2009/02/05",
            to: "2011/10/07"
    $(document).bind("kendo:skinChange", createChart);
In this article
Not finding the help you need? Improve this article