chartjs-plugin-crosshair

WebJar for chartjs-plugin-crosshair

License

License

MIT
Categories

Categories

JavaScript Languages
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

chartjs-plugin-crosshair
Last Version

Last Version

1.1.6
Release Date

Release Date

Type

Type

jar
Description

Description

chartjs-plugin-crosshair
WebJar for chartjs-plugin-crosshair
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/abelheinsbroek/chartjs-plugin-crosshair

Download chartjs-plugin-crosshair

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/chartjs-plugin-crosshair/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>chartjs-plugin-crosshair</artifactId>
    <version>1.1.6</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/chartjs-plugin-crosshair/
implementation 'org.webjars.npm:chartjs-plugin-crosshair:1.1.6'
// https://jarcasting.com/artifacts/org.webjars.npm/chartjs-plugin-crosshair/
implementation ("org.webjars.npm:chartjs-plugin-crosshair:1.1.6")
'org.webjars.npm:chartjs-plugin-crosshair:jar:1.1.6'
<dependency org="org.webjars.npm" name="chartjs-plugin-crosshair" rev="1.1.6">
  <artifact name="chartjs-plugin-crosshair" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='chartjs-plugin-crosshair', version='1.1.6')
)
libraryDependencies += "org.webjars.npm" % "chartjs-plugin-crosshair" % "1.1.6"
[org.webjars.npm/chartjs-plugin-crosshair "1.1.6"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : chart.js jar [2.9.3,3)

Project Modules

There are no modules declared in this project.

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

Requires Chart.js 2.6.0 or later.

Documentation

Example

new Chart(ctx, {
  // ... data ...
  options: {
    // ... other options ...
    tooltips: {
      mode: 'interpolate',
      intersect: false
    },
    plugins: {
      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.

Versions

Version
1.1.6
1.1.2