score:4

check this example. here is the javascript

var timeformat = "mm/dd/yyyy hh:mm";
function randomscalingfactor() {
  return math.round(math.random() * 100 * (math.random() > 0.5 ? -1 : 1));
}
function randomcolorfactor() {
  return math.round(math.random() * 255);
}
function randomcolor(opacity) {
  return (
    "rgba(" +
    randomcolorfactor() +
    "," +
    randomcolorfactor() +
    "," +
    randomcolorfactor() +
    "," +
    (opacity || ".3") +
    ")"
  );
}
function newdate(days) {
  return moment()
    .add(days, "d")
    .todate();
}
function newdatestring(days) {
  return moment()
    .add(days, "d")
    .format(timeformat);
}
function newtimestamp(days) {
  return moment()
    .add(days, "d")
    .unix();
}
function resetzoom() {
  window.myline.resetzoom();
}
var arr = array.from({length: 3000}, () => math.floor(math.random() * 40));
var config = {
  type: "line",
  data: {
    labels: _.range(0,3000,1),
    datasets: [
      {
        label: "my dataset",
        data: arr,
        fill: false,
        borderdash: [5, 5]
      },
    ]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "chart.js huge data set"
    },
    scales: { 
      xaxes: [
        {
          scalelabel: {
            display: true,
            labelstring: "x"
          },
          ticks: {
            maxrotation: 0,
            autoskip:true,
          }
        }
      ],
      yaxes: [
        {
          scalelabel: {
            display: true,
            labelstring: "value"
          }
        }
      ]
    },
    pan: {
      enabled: true,
      mode: "x",
      speed: 10,
      threshold: 10
    },
    zoom: {
      enabled: true,
      drag: false,
      mode: "xy",
     speed: 0.01,
     // sensitivity: 0.1,
      limits: {
        max: 10,
        min: 0.5
      }
    }
  }
};
config.data.datasets.foreach(function(dataset) {
  dataset.bordercolor = randomcolor(0.4);
  dataset.backgroundcolor = randomcolor(0.5);
  dataset.pointbordercolor = randomcolor(0.7);
  dataset.pointbackgroundcolor = randomcolor(0.5);
  dataset.pointborderwidth = 1;
});
window.onload = function() {
  var ctx = document.getelementbyid("canvas").getcontext("2d");
  window.myline = new chart(ctx, config);
};

check the working example here in codepen

check another example here

javascript is below

var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
    type: 'bar',
    data: {
        labels: ["red", "blue", "yellow", "green", "purple", "orange"],
        datasets: [{
            label: '# of votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
        scales: {
            yaxes: [{
                ticks: {
                    beginatzero:true
                }
            }]
        },
        // container for pan options
        pan: {
            // boolean to enable panning
            enabled: true,

            // panning directions. remove the appropriate direction to disable 
            // eg. 'y' would only allow panning in the y direction
            mode: 'x',

            speed: 1
        },

        // container for zoom options
        zoom: {
            // boolean to enable zooming
            enabled: true,                      
            // zooming directions. remove the appropriate direction to disable 
            // eg. 'y' would only allow zooming in the y direction
            mode: 'x',
        }
    }
});

$('#reset_zoom').click(function(){
    mychart.resetzoom();
    console.log(mychart);
});

$('#disable_zoom').click(function(){
    mychart.ctx.canvas.removeeventlistener('wheel', mychart._wheelhandler);
});

$('#enable_zoom').click(function(){
    mychart.ctx.canvas.addeventlistener('wheel', mychart._wheelhandler);
});

check the working example here in jsfiddle

score:7

please see this plugin and its example.

by default, you can draw a view box or use the mouse wheel to zoom in or out. double click to fit the chart in the canvas.


Related Query

More Query from same tag