The synchronization feature of HighCharts fails to function properly if the charts being used have varying widths

Question

The synchronization feature of HighCharts fails to function properly if the charts being used have varying widths

When using HighCharts, I experimented with Synchronized multiple charts following the example in this Fiddle. It worked seamlessly when all the charts had equal width.

$('#container').bind('mousemove touchmove touchstart', function (e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
        point = chart.series[0].searchPoint(event, true); // Get the hovered point

        if (point) {
            point.highlight(e);
        }
    }
});

However, when I adjusted the widths of the charts to different sizes, the tooltips were not syncing properly. You can test this out on the following Fiddle.

I'm curious if there is a way to synchronize the charts even if they have varying sizes?

javascript charts highcharts

Answer 1

Answer №1

If you encounter data points with matching x coordinates, you have the ability to capture the point from the chart where your cursor hovers, and then identify the corresponding points in the other two charts by invoking highlight().

function highlightPoints(e) {
  const container = this;
  const charts = Highcharts.charts.slice();
  const chartIndex = charts.findIndex(chart => chart.renderTo === container);

  if (chartIndex > -1) {
    const chart = charts.splice(chartIndex, 1)[0];

    const event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    const point = chart.series[0].searchPoint(event, true); // Get the hovered point

    if (point) {
      const x = point.x;
      point.highlight(e);

      charts.forEach(chart => {
        const points = chart.series[0].points;
        for (let i = 0; i < points.length; i = i + 1) {
          if (points[i].x === x) {
            points[i].highlight(e);
            break;
          }
        }
      })
    }
  }
}

Associate the mousemove event with the charts

$('.chart-0, .chart-1, .chart-2').on('mousemove', highlightPoints);

Example: http://jsfiddle.net/5vcc6z40/

Answer 2

If you encounter data points with matching x coordinates, you have the ability to capture the point from the chart where your cursor hovers, and then identify the corresponding points in the other two charts by invoking highlight().

function highlightPoints(e) {
  const container = this;
  const charts = Highcharts.charts.slice();
  const chartIndex = charts.findIndex(chart => chart.renderTo === container);

  if (chartIndex > -1) {
    const chart = charts.splice(chartIndex, 1)[0];

    const event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    const point = chart.series[0].searchPoint(event, true); // Get the hovered point

    if (point) {
      const x = point.x;
      point.highlight(e);

      charts.forEach(chart => {
        const points = chart.series[0].points;
        for (let i = 0; i < points.length; i = i + 1) {
          if (points[i].x === x) {
            points[i].highlight(e);
            break;
          }
        }
      })
    }
  }
}

Associate the mousemove event with the charts

$('.chart-0, .chart-1, .chart-2').on('mousemove', highlightPoints);

Example: http://jsfiddle.net/5vcc6z40/

The synchronization feature of HighCharts fails to function properly if the charts being used have varying widths

Answer №1

Similar questions

Using GreenSock to animate and manipulate the tween function's parameters

Assigned a gender to my _id using the first name and last name

Encountering a client component error with the app router in Next.js version 13.4.9

Appending a JSON object to an array does not result in the object being added to the

Bootstrap 4 modal experiencing issues with the form end tag functionality

Transmit a JSON object while simultaneously receiving the corresponding response

Determining html column values using a related column and user input

Tips for choosing a loaded element using the jQuery load() method

Removing cookies after sending a beacon during the window unload event in Chrome

Having trouble with my loop using Jquery's $.get method

Why isn't the field I added to my state functioning properly?

Error 400: The onCreate Trigger function for Cloud functions is experiencing issues with HTTP requests due to errors in the request

What is the best way to apply changes to every class in JavaScript?

Display a JavaScript dialogue box containing a PHP variable

What is the reason for both the d3 line chart and bar chart being shown simultaneously?

Positioning customized data on the doughnut chart within chart.js

The element type provided is not valid: it should be a string (for built-in components) or a class/function. Utilizing SSR with Node.js, React, and React-

Encountering a syntax error while attempting to send Node.js data to MySQL database

Guide on how to modify the color of a single row within a table with just a click

Incorporating a basic search feature into Ajax