score:1
Accepted answer
chartjs-plugin-streaming v1.6.0 now supports chartjs-plugin-zoom.
include chart.js, chartjs-plugin-zoom.js, chartjs-plugin-streaming.js and required libraries (moment.js and hammer.js), and add pan
and zoom
options. note that unlike other scale types, the rangemin
and rangemax
options don't specify time values. instead, pan.rangemin
and pan.rangemax
limit the range of the delay
option value while zoom.rangemin
and zoom.rangemax
limit the range of the duration
option value.
options: {
// assume x axis is the realtime scale
pan: {
enabled: true, // enable panning
mode: 'x', // allow panning in the x direction
rangemin: {
x: null // min value of the delay option
},
rangemax: {
x: null // max value of the delay option
}
},
zoom: {
enabled: true, // enable zooming
mode: 'x', // allow zooming in the x direction
rangemin: {
x: null // min value of the duration option
},
rangemax: {
x: null // max value of the duration option
}
}
}
Source: stackoverflow.com
Related Query
- Chartjs with zoom plugin zooms too much with wheel just with single turn
- Zoom is very slow in ChartJS Zoom Plugin
- How to properly use the chartjs datalabels plugin
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- implement chartjs zoom with buttons
- Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
- Datalabels plugin chartjs showing '[object]' instead of value
- Can't apply options of datalabels chartjs plugin in Vue
- How to add ChartJS code in Html2Pdf to view image
- ChartJS line chart drag and zoom
- Graph streaming real-time data with react and chartjs
- chartjs plugin datalabels does not show value on charts
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- Zoom chartjs with many X values
- Chartjs with streaming plugin: update y-range
- Chartjs Plugin Deferred throws "Uncaught TypeError: Cannot read property 'plugins' of undefined" error
- chart.js streaming data plugin data format or config error
- Issue loading chart.js zoom plugin with require.js
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- ChartJS unable to register global plugin
- ChartJS Zoom Granularity
- Grabbing the title in plugin for ChartJS
- ChartJS have xAxes labels match data source
- chartjs with the plugin chartjs-plugin-dragdata can i set fix dropdown values
- Have the current zoom information in chart.js with zoom plugin
- Chartjs v7.0 with plugin zoom, strange effect when use "drag" mode.
- Updating Chartjs to 2.5 with custom code
- Unable to ES6 import ChartJS plugin into Aurelia
- chart.js v3 - data decimation not working with zoom plugin
More Query from same tag
- Pug - Access data from server in pug script(type='text/javascript')
- No tooltips on Chart JS line graph
- How to loop over Chart.js with Django list view
- angular-chartjs line chart TypeError: t.merge is not a function
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- ChartJS + jQuery = Chart not showing
- Chartjs / ng2-charts line on hover does not work
- Line Chart Labels - Ng2Charts - ChartJS
- How can I create a bar chart that has multiple yAxes scales?
- Chart.js tooltip background color setting
- Chart.js Charts not loading until hard refresh [Laravel] [Laravel Charts]
- Chart.js - Make x-axis grouped by day
- How to update chart when state changes in vue?
- Chart.js not deploying properly on Heroku
- How to set ChartJS x-axis title
- Getting chart js bar chart to fill window
- How to add multiple background color in line charts
- Force two Chart.js doughnut charts with legends to same size in Bootstrap columns
- SPFx ChartJS Web Part
- Displaying line chart for multiple datasets using chart.js
- turn off point values in radar chart
- Chart.js setting maximum bar size of bar chart
- date and time chart With Chart js
- Add images inside bar chart in chart.js
- Show 'No data' in Pie when there is no data using VueJS and ChartJS?
- How do you limit the blur in a linear gradient on a canvas?
- Chart.js Example Diagramm don't show
- Prime NG Customise tool tip on Bar Chart
- Chart.js with Angular component - Type 'string' is not assignable to type 'ChartTitleOptions | undefined'
- Chart.js update bars of a bar-chart