Necrotizing Pineapple Music

    chartjs-plugin-crosshair
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/chartjs-plugin-crosshair package

    1.2.0 • Public • Published

    Chart.js plugin to draw vertical crosshair, zoom, interpolate values and sync chart interactions.

    Requires Chart.js 3.4.0 or later.

    Documentation

    Example

    new Chart(ctx, {
      // ... data ...
      options: {
        // ... other options ...
        plugins: {
          tooltip: {
            mode: 'interpolate',
            intersect: false
          },
          crosshair: {
            line: {
              color: '#F66',  // crosshair line color
              width: 1        // crosshair line width
            },
            sync: {
              enabled: true,            // enable trace line syncing with other charts
              group: 1,                 // chart group
              suppressTooltips: false   // suppress tooltips when showing a synced tracer
            },
            zoom: {
              enabled: true,                                      // enable zooming
              zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',     // background color of zoom box 
              zoomboxBorderColor: '#48F',                         // border color of zoom box
              zoomButtonText: 'Reset Zoom',                       // reset zoom button text
              zoomButtonClass: 'reset-zoom',                      // reset zoom button class
            },
            callbacks: {
              beforeZoom: () => function(start, end) {                  // called before zoom, return false to prevent zoom
                return true;
              },
              afterZoom: () => function(start, end) {                   // called after zoom
              }
            }
          }
        }
      }
    });

    Development

    You first need to install node dependencies (requires Node.js):

    > npm install
    

    The following commands will then be available from the repository root:

    > gulp build            // build dist files
    > gulp build --watch    // build and watch for changes
    > gulp lint             // perform code linting
    > gulp docs             // generate GitBook documentation (`dist/docs`)
    > gulp samples          // prepare samples for release (`dist/samples`)
    > gulp package          // create an archive with dist files and samples
    > gulp netlify          // prepare Netlify artifacts (`dist/www`)
    

    License

    chartjs-plugin-crosshair is available under the MIT license.

    Install

    npm i chartjs-plugin-crosshair

    DownloadsWeekly Downloads

    9,067

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    51.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • abelh