How do I highlight bars on my various Bar charts?

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Sudarshan on 25th October 2017

I am drawing a bar chart, Almost 10 bar charts with different data and different labels for each bar chart. Here if I am clicked on one bar chart I want to highlit the bar in other charts i.e (if the tooltip is matched with that bar tooltip   I want to add opacity or any colour to this particular bar ).Is there any such a way to do like that or javascript code also fine for me.If you have link post with an example.

For Example:

same like as above link but I have two charts in that above link stacked bar chart Olga matches with the bar chart first element bar's Olga then highlight the Olga in both places remaining all the bars are needed to add opacity.Give me any suggestion.

Posted by Richard on 25th October 2017
Hi there,

Well, if I understand you correctly, then I think you mean that when one chart is clicked you want to highlight a bar on the other. Is that right?

An example page:

Posted by Sudarshan on 26th October 2017
Hi Richard,

Yes, exactly but I am using all kind of charts (bar,pie,waterfall,donut,line) charts it's working for a bar that's fine if I take both bar and pie I clicked on the bar it's showing error.Because of its pie chart object.Your not storing any coords for the pie and donut charts so it's showing error. So how can I solve this problem give me any suggestion?
Posted by Richard on 26th October 2017
Hi there,

In the case of Pie charts all of the details of the segments are held in the obj.angles variable. There is: start angle/end angle/\/y (In that order IIRC) so obj.angles[0] is the first segment, obj.angles[1] is the second segment and thus:

obj.angles[0][0] = First segment start angle
obj.angles[0][1] = First segment end angle
obj.angles[0][2] = First segment center X coordinate
obj.angles[0][3] = First segment center Y coordinate

And with that information you can highlight the relevant segment. And you can use obj.type to determine what type the object is and then choose the correct way to highlight the chart.

Posted by Sudarshan on 27th October 2017
Hi Richard,

Thanks, Richard all working fine.

I want to explore on highlighting thing.Here I clicked on one bar rest of all charts the particular slice(in a pie)or point(inline) is highlighting, that's ok.Here I want to use ctrl to select multiple bars those related indexes should be highlighted in all the rest of charts. I tried it it's not working how can I achieve that.
Posted by Richard on 27th October 2017
Hi there,

Well it doesn't happen automatically - you'll need to write it so that it does that. I have a demo here:

That does multiple select. It's not an insignificant amount of code though. And all it does is highlight the bars. If you want it to do other things you'll need to add it in.


Add a reply

« Back to message list