CODEWITHSUNDEEP
highcharts
LiveEn
LiveEn

Reputation: 3253

link 2 different types of highcharts data

is it possible to link/sync 2 chart data in 2 different type of charts to show tooltips at once?

for an example, i have a pie chart and a area chart.

The pie chart represents the percentage of a particular browser and the area chart shows the downloads per year for each browser.

What i need to do is if someone clicks or hovers on section of the pie the relevant line and the tooltip of the area chart should be highlighted...

so when someone clicks/hovers on firefox on the pie, the line relevant to the area should show and vice versa...

is this something possible with highcharts?

So far the work i have done is https://jsfiddle.net/livewirerules/a9tntdam/1/

One thing that i noticed is i have added the event in my area chart to show the color when the tooltip is hovered.

events: {
               tooltipRefresh: function(e) {
                 if (!e.target.hoverSeries) return;
                 $('.highcharts-tooltip>path:last-of-type')
                   .css('fill', e.target.hoverSeries.color);
               }
             }

when i hover a line on the area chart and move to the pie chart, the background color of the tooltips are changed.

Upvotes: 0

Views: 277

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I am not sure what would you like to show in a tooltip when you hover on your pie. You have one point so its hard to show tooltip for whole series on another chart.

You can use mouseOver and mouseOut events callback functions for highlighting series (so they will look like on hover): 

point: {
  events: {
    mouseOver: function() {
      var name = this.name;
      Highcharts.each(chart2.series, function(s) {
        if (name === s.name) {
          s.setState('hover');
        }
      });
    },
    mouseOut: function() {
      var name = this.name;
      Highcharts.each(chart2.series, function(s) {
        if (name === s.name) {
          s.setState('');
        }
      });
    }
  }
},

You can use tooltip.refresh(point) for refreshing tooltip on specific point: 

      mouseOver: function(e) {
        this.group.toFront();
        this.markerGroup.toFront();
        var name = this.name;
        Highcharts.each(chart.series[0].data, function(p) {
          if (name === p.name) {
            p.setState('hover');
            chart.tooltip.refresh(p)
          }
        });
      },

Here you can see an example how it can work: http://jsfiddle.net/a9tntdam/4/

Upvotes: 1

Related Questions