Hi team,
I m trying to integrate crosshair and wanted to have sync functionality across two graphs . But even after following the instructions and options given for this plugin, i m unable to see vertical line across graphs or even in single graph too. I m using latest versions of both your plugin as well as ng2 Charts.

TIA

I have a basic line chart with time on the x axis. When this plugin is enabled, the animation stop working
See this stackblitz for an example
https://stackblitz.com/edit/angular-sex9k8

When setting CROSSHAIR_ENABLED to false the animations reappear.
With "animation" I am referring to the animation when you disable a item on the chart. E.g. when you click on the red or green block to hide one of the data sets on the chart

When loading a chart with crosshair enabled, I am recieving the following TypeError:

TypeError: chart.crosshair is undefined chartjs-plugin-crosshair.js:395:11
    beforeTooltipDraw https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-crosshair.js:395
    notify https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7
    _drawTooltip https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7
    draw https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7
    render https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7
    callback https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7
    advance https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7
    startDigest https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7
    request https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7

This only happens when using version 1.1.3 or 1.1.4 via CDN.
Version 1.1.2 works as expected:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-crosshair.js"></script>

I have not tried loading from local file.

Bug or mistake on my end?

Following setup:

• jQuery 3.4.1
• Bootstrap.js 4.3.1
• Chart.js 2.8.0

Uncaught TypeError: Cannot read property 'dragStarted' of undefined
at Object.beforeTooltipDraw (chartjs-plugin-crosshair.js:394)
at Object.notify (Chart.min.js:10)
at t._drawTooltip (Chart.min.js:10)
at t.draw (Chart.min.js:10)
at t.render (Chart.min.js:10)
at Object.callback (Chart.min.js:10)
at Object.advance (Chart.min.js:10)
at Object.startDigest (Chart.min.js:10)
at Chart.min.js:10

Will it be possible to add this plugin to the chartjs financial plugin? Because now if I put them both, crosshair doesn't work.
Thanks

First of all - this plugin looks awesome ! just what I needed !
Can you add an example with working line chart?
You have written here it should work..
I have tried to get it to work with line chart, with no success..
In all your samples I only saw Scatter chart type..
Another issue - a link to a working JSFiddle can help.. It's hard to see the code in the samples you gave..

I have a dense time series dataset in the form of a line chart. It's almost impossible to land on the first datapoint in the series or the last datapoint in the series without exiting the canvas and losing the crosshair altogether, is there any remedy for this? Should I null pad the dataset or maybe there is an option in the plugin or chartjs that would solve it? Thanks!

Links to "Installation" and "Options" documentation links lead to dead web pages.

Situation

I have multiple charts in my page that show different datasets.

I want to use chartjs-plugin-crosshair to be able to show vertical lines on hover.

I also want to sync the vertical lines so that I can the vertical on the same date.

Bug

Both of the above work, except I noticed a weird bug where enabling sync: {enabled: true} means hiding/showing a dataset of one chart hides/shows a dataset of another (even though they have different keys)

When I make sync: {enabled: false}, the weird bug stops, but then I lose the feature of syncing the vertical lines.

I looked through the code of the plugin but I don't see anything that changes the hidden property of datasets.

Plugin config

The plugin config is simple:

    crosshair: {
      ...
      sync: {
        enabled: true, // enable trace line syncing with other charts
        group, // chart group
        suppressTooltips: false, // suppress tooltips when showing a synced tracer
      },
      zoom: {
        enabled: false,
      },
    },

For confidentiality reasons I had to hide some info with red boxes. When I toggle a label on the first chart (top left) some of the labels of the others ones also get toggled. I never touch any of the labels of the remaining charts.

What gives?

I've been playing with the build from the chartjs3 branch and ran into an issue. It appears the plugin is registered and enabled for all charts by default. This causes problems because of some compatibility issues with other chartjs plugins.

I have tinkered with it and don't see a way to either A) not have it automatically enabled for all charts or B) disable it on charts that I don't want it on.. so far I have been unsuccessful at both.

I have tried setting Chart.register(crosshairPlugin); to Chart.unregister(crosshairPlugin); which does not work. This just causes the plugin to not be usable at all.

Hi, Thanks for this wonderfull app, its really great to use.
I have one request.
Since the chart.js 3.0 is ongoing in good condition, it would be wonderful if you could make it compatible on
Chart.js 3.0 as well.

Could you please work it out on it?

Thank you & Regards,
Rashearth

I'm trying to integrate this plugin into <Line> component. Here is my integration code.

import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-crosshair';

...
...

const options = {
      responsive: true,
      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
          }
        }
      }
}

...

render() {
  return (
    <div>
      <Line data={myData}  options={options} />
    </div>
  );
}

How do I make this plugin know react-chartjs-2?

It'll be nice to see the docs :) Mb you haven't noticed

If I have multiple line series and using tooltips' mode nearest and not interpolate the tooltip being rendered with data of only a single series, look at the Codepen below:
https://codepen.io/anatoly314/pen/QevREp

I'm using a line chart and want to know if its possible to have a vertical crosshair line snap to the nearest datapoint instead of always being under the mouse?

From what I see from the code base there is currently no ways to use the scrollwheel to zoom.

Is this a feature that is planned to be released?
If not, how would you implement such a feature?

Thanks

I followed all the steps to add this plugin and everything works great except for the little dot(s) that trace the graph and is fixed to the vertical line (in the demo they are little hollow circles). I've tried adjusting config options but cannot get them to appear. Anyone have any ideas? And if they do appear, is there any way to style them? Thanks!

In my current project context I need the crosshair to be disabled not only on mouseout, but also on mouseup. To have those events customizable would help a ton.

The dist folder is missing in release 1.1.5, but package.json references
"main": "dist/chartjs-plugin-crosshair.js",

This causes imports to fail with Module not found: Error: Can't resolve 'chartjs-plugin-crosshair'

Version 1.1.4 contains the dist folder with chartjs-plugin-crosshair.js and chartjs-plugin-crosshair.min.js (as well as docs and samples)

Hello all,

I'm trying to retrieve points using the onclick handler and "getElementAtEvent" function
https://www.chartjs.org/docs/latest/developers/api.html#getelementatevente

I believe this is failing because of the custom tooltip mode "interpolate" (although I'm not sure).

I have tried all four methods, i.e.

• getElementAtEvent(e)
• getElementsAtEvent(e)
• getElementAtXAxis(e)
• getElementAtEventForMode(e, "interplolate", {intersect: false})

These functions are returning an empty array when the plugin is being used, but I am able to click on a point and retrieve values when the plugin is not enabled.

I'm willing to dive in and fix this issue myself, but was wondering if someone might be able to point me in the right direction.

Hi! Running angular 10.0.8 and using your plugin just like the example you provided. For some reason, I cannot see the horizontal cross hair. Is there a setting for this that I have just missed?

It looks like the dependency to chart.js is causing the plugin to be installed as a nested node_module to crosshair. It's listed as both a dependency and a peerDependency, the dependency seems to be the problem. Both my package.json and crosshair package.json are pointing to the same chart.js "^2.9.3" but it still installs as nested (and breaks). I can see datalabels plugin installs as peerDependency and devDependency - maybe that is the solution.

Can I have a single tooltip for linked charts that shows data from different charts?

Something like:

Hi !
Thanks for this useful plugins !
I have the need to know when we click on the "Reset zoom" button but I don't see the possibility to pass a callback.
I maybe wrong, so let me know.

Hi, I asked initially this question on Stackoverflow, but meanwhile, nobody could help me, maybe someone here had the same issue and was able to solve it?
NPM module doesn't work with Webpack 3 but works with vue-cli3 which based on Webpack 4

I'm trying to use the following ChartJS plugin: chartjs-plugin-crosshair. When I use it within a new VueJS project which was built by using vue-cli v3.3.0 everything is working as it should, but when I trying to use it within the legacy VueJS project which utilize Webpack 3 it doesn't work. No errors being thrown, just functionality which it should add to ChartJS was absent.

When I tried to debug the issue and opened chartjs-plugin-crosshair/dist/chartjs-plugin-crosshair.js file which I obviously import from within my project I paid attention that it doesn't have module.exports = ... neither export default ... and when I rewrote the plugin so it does have export statement it began partially work.
However, functionality which was added by line 21:

    Chart$$1.Interaction.modes.interpolate = function(chart, e, options) {
        ...
    }

still didn't work till I moved this code inside a VueJS component.

As I understand this plugin uses module dependency which isn't supported by my Webpack configuration, but I couldn't understand which one it uses. Here is a relevant code:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('chart.js')) :
    typeof define === 'function' && define.amd ? define(['chart.js'], factory) :
    (factory(global.Chart));
}(this, (function (Chart) { 'use strict';
...
})));

• First question is which module dependency it uses and how I should change my Webpack configuration to cause it work. I didn't share my current webpack.conf.js because it's distributed across multiple dev, base files, but if it's required I will share the whole project after some cleaning.

• The second question why functionality added by altering Chart object at line 21 as I mentioned above doesn't work. I understand that at some point altered object being overridden, but why and how can I fix it?

This is code of my VueJS component which supposed to use this plugin:

<script>
import crosshairPlugin from 'chartjs-plugin-crosshair';
import { Line, mixins } from 'vue-chartjs';
import { CHART_DEFAULTS } from './defaults';
const { reactiveProp } = mixins;

export default ({
  extends: Line,
  mixins: [reactiveProp, CHART_DEFAULTS],
  props: {
    options: Object
  },
  data () {
    return {};
  },
  mounted () {
    this.addPlugin(crosshairPlugin);
    this.renderChart(this.chartData, this.computedOptions);
  }
});
</script>

Thank you in advance.

Please help To solve this, all I want is I wanna move the crosshair with the current time of video as the x-axis is equal to the time of the video in seconds. so I want Crosshair to move according to the video. Pausing Should Pause crosshair and Seeking make crossHair move accordingly.

I'm trying to call resetZoom on a button click. I don't like the default button, and would like my "reset zoom" button to be next to the rest of my UI. Looking at chartjs-plugin-crosshair.js i found this:

 chart.crosshair = {
      ...
      reset: function() {
        this.resetZoom(chart, false, false);
      }.bind(this)
    };

So i would assume calling graph.crosshair.reset would call resetZoom and reset the zoom, but that does not happen. The default button does disappear. Loggin graph.crosshair.reset to console gives me function () so i am finding that correctly.

Maybe i've got it all wrong, but i can't seem to figure this out, and any help would be lovely.

Hi @AbelHeinsbroek!
Checked last version of the plugin (1.2.0), it's great
Anyway, there are issues to address:

• Unintended/automatic plugin activation (#79)
  I added a bit more info for that case in the issue

  • A PR introducing additional checks #71 might be also useful in case of unsupported chart type

• Typo raising an error during afterInit and afterEvent events handling: ReferenceError (#49)
  This issue still needs to be addressed for the sake of completeness and being robust (otherwise it throws Errors if the plugin was not configured at all (previous item), or the scale type is not supported)

Would love to use this plugin in our project
Regards, Andrew
P.S. I could help you by contributing to the repo if needed 😉

how to bring two vertical crosshairs in the chart and set it in the chart?
In Time Series Insights(MS Azure TSI - Time Series Insights), we have two vertical crosshairs which are set in the chart and displays the data points of two different time series. Do we have any similar options here to set two vertical crosshairs in the chart?

Appreciate the assistance in advance. Thanks!

I tried doing this myself in the code but chart.crosshair.y is undefined so I can't seem to draw a line horizontally from the point. Am I missing something?

I'm getting the following error when I inspect the chart:

Uncaught TypeError: Cannot read property 'Interaction' of undefined

I'm quite new to this but it appears to point to my wp-admin>admin.php file. I approached bluehost and they requested "the correct PHP limits and PHP version settings" for the version of the plugin I am trying to use (1.1.6). They advise they will then "set the plugin vendor's requirements".

What are the correct PHP limits and PHP version settings (v. 1.1.6)?

Alternatively, any other ideas on how to address this error would be useful.

Thanks in advance...

When the chart has a high amount of points (256 horisontal in this case), hover is disabled in the right side of the chart. I have tried all modes including the interpolate one included with the module, but the right side of the chart is still unresponsive.

This is our configuration:
crosshair: {
line: {
color: #0f0;
width: 1
},
snap: {
enabled: true,
},
sync: {
boolean: false,
},
zoom: {
enabled: false,
},
}

I've successfully implemented crosshair on two linear charts. My problem is that my app, needs lots of charts, some are not 'Line' type charts. And if I try to add a 'radar' type chart, my app crashes because crosshair is looking for xAxis and yAxis (that don't exist on a radar chart). So I need to disable crosshair for that specific chart. Can you tell me how to do it?

Could you not automatically register the plugin? It seems to be causing issues where the plugin gets enabled even if I try to specifically disable it by doing plugins : { crosshair : false } in my chart configuration.

Hi, there is a problem that the zoom does not work for graphs with the type of "line". I use several graphs, and I need synchronization of the crosshair and such synchronization with the zoom, now the crosshair is working properly, but after performing the zoom, all data disappears from the graphs.
Any idea how to fix this?

Hi there I am following the installation instructions exactly as they are in the documentation and importing the plugin crashes my build with the following error. I am unsure why, I am using all the version that are specified:

Plugin Version: 1.2.0
Chart.js: 3.4.0

Error

/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:1
TypeError: Cannot read property 'prototype' of undefined
    at TypedRegistry.isForType (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:5883:74)
    at Registry._getRegistryForType (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6028:15)
    at /Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6008:39
    at Array.forEach (<anonymous>)
    at Registry._each (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6007:15)
    at Registry.add (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:5964:10)
    at Function.value [as register] (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:7220:16)
    at eval (webpack-internal:///./components/charts/chartDefaults.ts:40:48)
    at Module../components/charts/chartDefaults.ts (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/_app.js:283:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/_app.js:23:31)
error - /Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:1
TypeError: Cannot read property 'prototype' of undefined
    at TypedRegistry.isForType (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:5883:74)
    at Registry._getRegistryForType (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6028:15)
    at /Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6008:39
    at Array.forEach (<anonymous>)
    at Registry._each (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6007:15)
    at Registry.add (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:5964:10)
    at Function.value [as register] (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:7220:16)
    at eval (webpack-internal:///./components/charts/chartDefaults.ts:40:48)
    at Module../components/charts/chartDefaults.ts (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/_app.js:283:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/_app.js:23:31)
/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:1
TypeError: Cannot read property 'prototype' of undefined
    at TypedRegistry.isForType (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:5883:74)
    at Registry._getRegistryForType (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6028:15)
    at /Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6008:39
    at Array.forEach (<anonymous>)
    at Registry._each (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:6007:15)
    at Registry.add (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:5964:10)
    at Function.value [as register] (/Users/josephtimko/work/netspring/firewatch/node_modules/chart.js/dist/chart.js:7220:16)
    at eval (webpack-internal:///./components/charts/chartDefaults.ts:40:48)
    at Module../components/charts/chartDefaults.ts (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/_app.js:283:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/_app.js:23:31)

Plugin Import Code This is effectively identical to that in the README, I am unsure what could be going wrong here

import { Chart, Interaction } from "chart.js";
import { defaults } from "react-chartjs-2";

import Color from "color";
import AnnotationPlugin from "chartjs-plugin-annotation";
import DataLabelsPlugin from "chartjs-plugin-datalabels";
import { CrosshairPlugin, Interpolate } from "chartjs-plugin-crosshair";

// Plugin Registration
Chart.register(AnnotationPlugin);
Chart.register(DataLabelsPlugin);
Chart.register(CrosshairPlugin);
Interaction.modes.interpolate = Interpolate;

Hi!

Do you think would be possible to create a new release with the changes on master?
In fact, I saw that you already changed the version to 1.1.4.
I was going to create a PR adding support for category .. but is just there 😄
v1.1.3...master#diff-1c7539eadace3d30f13b7c9ffcd868b9R47

Thanks!

When tooltip interpolation is not used, the first point is duplicated on zoom.

This happens for both linear and time axis.

If tooltip interpolation is used the value doesn't seem to be duplicated

https://codepen.io/danmana/pen/GRZQNpR

When zoomed in the dataset.data array contains a duplicate first value

When zoomed out, the data is ok

It would be helpful for financial/stock charts to have the option to "grey out" the chart behind the crosshair.

how can i use this plugin

In the beforeZoom and afterZoom callbacks, it would be helpful, if also the chart instance would be send as parameter, and not only the start and the end of the zoom.

I had a bug when using plugin with multiple lines in chart and 'time' type in xAxes.

I found if I replace _index: items.length here

Would it be easy to expose an onSnap callback that fires when snap changes and passes the values on the chart that are being snapped to? I can start the PR if you point me in the right direction.. thanks!

Is it possible to support a logarithmic x axis?

It is possible to create linked charts but to remove the functionality that links the legends?

I've created a simple example of linked charts (loosely based around one of the samples): https://codepen.io/sheixt/pen/JjGvbVJ

As you can see, if you "turn off" a dataset (e.g. Dataset 1, "A" in chart 1, "D" in chart 2, and "G" in chart 3), the dataset is removed from all of the linked charts.

I have a series of charts that are based on the same x-axis data so the crosshair line & the tooltip appearing on all of the linked charts is ideal. But as each dataset that is plotted is not the same across the various charts, I do not want it to disappear on click.

So in my example deselecting Dataset 1 on chart A, that would be removed but "D" in chart 2, and "G" in chart 3 should remain. I couldn't see specification for this in the documentation.

I hope this is the right place to raise such a query. Let me know if I can offer any further information.

(If this isn't possible, could point me to the section of the plugin that handles this? Then I shall see if I can offer PR with a solution.)

Hi,

Trying to use this plugin. I have two charts that are loaded via AJAX call for data. The problem is that when used with Chart JS 3.2.0 I get this error in Console and plugin does not work:

chartjs-plugin-crosshair@1:7 Uncaught TypeError: Cannot read property 'register' of undefined
    at chartjs-plugin-crosshair@1:7
    at chartjs-plugin-crosshair@1:7
    at chartjs-plugin-crosshair@1:7
    at chartjs-plugin-crosshair@1:7

Crosshair is rendered on top of tooltips (and the datalabels plugin annotations). It would be nice to be able to push it behind elements in the chart.

When the dataset data is not sorted ascending by x value the interpolation does not work.

https://codepen.io/danmana/pen/mdVPbEb?editors=1010

Interpolate assumes the data is sorted ascending when searching for the matching index on hover.
https://github.com/AbelHeinsbroek/chartjs-plugin-crosshair/blob/master/src/interpolate.js#L31

If making this work with desc data complicates things too much, we should at least document this behavior.

I noticed that the samples are all linear axes. Does it work on time charts? The README doesn't say