For adding zoom and pan you have to:

Install (Zoom)[] plugin:

$ npm install chartjs-plugin-zoom

Add it to your chart wiht it's settings:

import zoomPlugin from 'chartjs-plugin-zoom';
      <CChartBar
        {...props}
        plugins={[zoomPlugin, annotationPlugin]}
        options={{
          plugins: {
            zoom: {
              pan: {
                enabled: true,
                mode: 'xy',
                threshold: 10,
                
              },
              zoom: {
                wheel: {
                  enabled: true,
                  speed: 0.1,
                  
                },
                drag: {
                 enabled: false,  
                 },
                pinch: {
                  enabled: false
                },
                mode: 'xy',
              }
            },
          }
        }}
      />

Currently I'm having some errors if I don't provide ALL setitings, so you should keep that in mind when using other plugins as well, it's explained here #7
:)

how to add zoom and pan in charts and also how to filter chart with tha date #3

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions