Sync is not working

[erkanisuf]

I am using chartjs version 3.7 , plugin version 1.2.0 and react-chartjs version 4.0.0 . The sync is not workinng for some reason .

Import and registration :

import {CrosshairPlugin, Interpolate} from 'chartjs-plugin-crosshair';
Chart.register(CrosshairPlugin);
Interaction.modes.interpolate = Interpolate

options setup:

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
}
}
}

I used two identical charts with exacly same props/data. But the sync is gone. When i have used the plugin with chartjs before version 3v and plugin version 1.1.2 , the sync has worked. Am i missing something or is this some kind of bug?

[geriatricdan]

Ayo, Download the unminified file, and change where new event is defined to this:
native: {
buttons: buttons,
type: e.original.type == "click" ? "mousemove" : e.original.type
},
It loses context between charts.
You're welcome

[andreialecu]

Hit the same issue.

It appears that sync is working on chartjs version 3.4.x but not newer versions. I was able to pin chartjs to ~3.4.1 to work around this temporarily.

[savejeff]

type: e.original.type == "click" ? "mousemove" : e.original.type

this worked for me. very nice

[Bodrosh]

Ayo, Download the unminified file, and change where new event is defined to this: native: { buttons: buttons, type: e.original.type == "click" ? "mousemove" : e.original.type }, It loses context between charts. You're welcome

Thanks, it's work in "chart.js": "^3.7.1", "chartjs-plugin-crosshair": "^1.2.0"

[cmark1302]

@Bodrosh I am also facing the same issue. Can you please upload an example on codesandbox with react-chartjs ?

[cmark1302]

@geriatricdan Thank you so much :) I was stuck with this and you saved my time. Any idea why reset zoom button was placed below instead of on top of the graph ?

[erkanisuf]

@geriatricdan possibly PR so they can put this fix in the official plugin 👀

[cmark1302]

@erkanisuf Does zoom works ? graph not showing up after zoom. it goes away

[erkanisuf]

I am not using the zoom but yes its feels wierd and buggy

[savejeff]

I have done a range of fixes and improvements to the chartjs-plugin-crosshair.js file.
It works out of the box with the latest version of chart.js.
I don't thing the Owner of the code is maintaining it anymore or is doing PR reviews. If anybody wants to try out me "fork" of the code hier it is

chartjs-plugin-crosshair.zip

[cmark1302]

@savejeff It looks zoom doesn't work with above attached file.

[savejeff]

what kind of zoom are you talking about? If you are talking about the zoom where you click and drag sideways to zoom into the area draged over, this works perfectly find with the code in the zip file. i use it daily.
Other zoom like pitch and scroll zoom are not implemented in this library.

check this:
do you have the latest version of chats.js
is your code correct? check the code from the examples
does it give you any errors in the console ?

i would start looking for the fault in you code.

[cmark1302]

No errors on console. but when i zoom, line chart vanished. After reset zoom click, i can see the line chart.

I am using latest version of charts.js react-chart-2.js

[savejeff]

dont know about react.
i can assure you, that it works with chart.js 3.7.1.

[GeoBau]

@savejeff Thanks for your zip - It syncs perfect also with 3.8.0..
I have one problem: I cannot switch on/off the datasets by clicking on the smbol and text in the legend (sync or w/o sync).

Now I made more tests: I want that the tooltips on the last datapoint is shwon on the first call of the chart.
When I add this code to my config file, the tooltip is shown, but then the problem with legend happens.
you can see this effect at www.zebrafell.de/test.html.
Without this plugins code the click to the legend works..
Do you have an idea what I can do?

    plugins: [
      {
        afterDatasetUpdate: (chart) => {
          if (!chart.tooltip.getActiveElements().length) {
            sets = [];
            for (let index = 0; index < data.datasets.length; index++) {
              sets[index] = {
                datasetIndex: index,
                index: chart.data.datasets[index].data.length - 1,
              };
            }
            chart.tooltip.setActiveElements(sets);
            chart.update();
          }
        },
      },
    ],

I find finally the solution: I deleted the chart.update()
Problem is solved!!

[sarates]

@cmark1302 sorry, did you manage to find a working solution for react-chart-2? Thanks.

[bolau]

It seems that the fix by @geriatricdan is already contained in the repository code, but at the wrong place:

var newEvent = {
  // REMOVED FROM HERE
  // type: e.original.type == "click" ? "mousemove" : e.original.type,  // do not transmit click events to prevent unwanted changing of synced charts. We do need to transmit a event to stop zooming on synced charts however.
  chart: chart,
  x: xScale.getPixelForValue(e.xValue),
  y: e.original.y,
  native: {
    // INSERTED HERE
    type: e.original.type == "click" ? "mousemove" : e.original.type,  // do not transmit click events to prevent unwanted changing of synced charts. We do need to transmit a event to stop zooming on synced charts however.
    buttons: buttons
  },
  stop: true
};

[samadarshad]

Im also struggling with this. Only managed to get the synced tooltips working with chartjs 3.5.1.

[Heunsig]

I have the same problem. sync is not working in Chart.js version 4. It is working up to version 3.5.1, but not after

[NiTRoeSE]

I also have this problem, can confirm that it works with chart.js 3.5.1 but not greater version.
There is a fix available in branch 4.0.1 but unfortunately no plugin.js file to use it in web application.
How can i get such file to import it in html via <script> src... </script> tag ?

Any help would be great , thanks in advanced!

Update:
Ok, realized that i have to pull repository, switch to branch 4.0.1 --> npm install --> gulp build --> find files in dist folder :D

[airplaneboy]

Ok, realized that i have to pull repository, switch to branch 4.0.1 --> npm install --> gulp build --> find files in dist folder :D

Can you explain more? Please.

[NiTRoeSE]

Can you explain more? Please.

Hi, you have to compile version 4.0.1 by yourself, because there are no precompiled releases.
To do that you have to:

1. Clone the Repository
2. Install NPM ( if not already done) on your machine
3. Switch to cloned repository
4. Switch the branch to 4.0.1 (git checkout 4.0.1)
5. run npm install
6. run gulp install
7. You can find the compiled files in the dist folder.

[airplaneboy]

Thank you for getting back. I just did what you said, but it still doesn’t work for me. It’s telling something about “interpolate “ not being apart of some object type.

[mgmorcos]

Same issues with sync and zoom here.

[firebird631]

I use the fork (patched) version compatible with chartjs 4. It works except that :
From first chart, I have crosshair and tooltip, but in second I have only the crosshair and not the tooltips.
If I move cursor from the second chart, I have both crosshair and both tooltips.
I use the group 1 and do not suppress tooltips.
I disable zoom also (have zoom plugin).

[Yash-Chauhan-Skords]

switching to 3.4.1 made it work

[joeuhren]

Just a note that the proposed fix by @geriatricdan and/or using the 4.0.1 branch as indicated above only works when the charts are the same height. If one chart is taller than another, the sync seems to work at first but can break while going back and forth across the data points so that the 2nd chart just stops moving in sync until you mouse out and back in to reset it.

The first and only repo I've seen that contains a fix for variable height charts is https://github.com/TrevorLeeman/chartjs-plugin-crosshair/. The fix works great for the newest chartjs (4.4.7 at the time of writing) although it requires that you add an additional line to the chart config like this:

plugins: {
  crosshair: {
    sync: {
      axis: 'x', // Sync tooltips across charts of variable heights. Possible options: 'x' | 'xy'. Default: 'xy'
    }
  }
}

A big thank you to TrevorLeeman's and everyone else who originally helped with different variations on a fix for this bug!

For anyone looking for a quick way to take advantage of the fixed version in your own projects, I forked TrevorLeeman's repo and added the fixed js files to the project so that they can be used via cdn. Feel free to directly link to my repo via cdn link with https://cdn.jsdelivr.net/gh/joeuhren/[email protected]/build/chartjs-plugin-crosshair.min.js. Don't forget to add the plugins > crosshair > sync > axis config line if you are going to be using variable chart heights.

Also note that I do not plan to maintain my fork of the crosshair plugin. If it happens to break again in a future chartjs version, I would recommend staying with whatever version of chartjs continues to work until another fix is found.