Highcharts synchronized Typescipt issue - highcharts

I am working on creating the synchronised chart in Typescript. After adding all the typescript declarations, the synchronised tooltip stopped working as it's was working before. I can't see the tooltip for multiple charts when hovering on any any chart.
I would like to see the expected behaviour of sync tooltip.
https://www.highcharts.com/docs/advanced-chart-features/highcharts-typescript-declarations.

Related

Angular Highchart data is not updating on toggle button

Data is not updating on toggle button, while updated data is provided to chart. Chart is not reflecting updated data. Please help me how to fix?
Note: I am using Angular Highcharts official wrapper.
"highcharts-angular": "^2.10.0"

HighChart accessibility glitch?

I have followed the accessibility example for a Highchart stock chart demo and noticed that sometimes I could access the data points using the arrow keys, and sometimes I cannot.
It turns out when I do not have NVDA running, I can access the data points with the arrow keys, and when NVDA is running, I cannot. I am using the latest version of Highchart's accessibility JS file (version 8.2.2)
I have also noticed this occurs on the demo chart. Has anyone come across this too and have a workaround solution to share?

Highcart reflow function when using as a polymer component

I'm using a polymer seed UI application, in which I needed to display some graphs so decided to use high charts. I created a custom component and added one of the charts e.g. barcharts and added this polymer component to my seed application do display the bar charts.
I am able to view the charts correctly, however, I faced an know issue of rendering the charts which didn't fit the container. In order to resolve it, I need to use highcart.reflow() event. But I don't know on which lifecycle of polymer I should do it and it will resize the charts correctly on page load.
any help is appreciated

How to disable the animation of the datalabels on a pie chart with HIghcharts?

I have a page running a couple of charts done with HighCharts. I'm also running PhantomJS to save the pages as PDFs. Due to the way PhantomJS works, I need to disable all of the animations on HighCharts to allow it to save the page correctly. Problem is, I can't find a way to disable the animation of the datalabel on a Pie chart. The plot animation is disabled, the chart animations are disabled, but the datalabels are still animated (coming from the left of the page to sit on its correct location). How can I fix it?
You probably need to set the series.animation to false as well. See this example.
plotOptions: {
series: {
animation: false
}
},
Note that I am not able to test if the dataLabels animate or not. I have not seen them animate.
So I found the issue, it is not on the Highcharts main sourc. I'm using Dojo, and not jQuery, so I installed this adapter. Problem is, that adapter adds the animation, and not HighCharts itself. I realized it when I created the jsFiddle, and saw that using jQuery was giving a different behavior than using dojo.

Highcharts: tooltip Click instead of hover

Is there a setting for highcharts tooltips where you can set it to display on click versus hover?
I have seen a lot of people discussing the tooltip staying on click but then there is still the hover present. Is there a way to disable the hover and use only click?
There is not a setting for that in Highcharts currently.
There is a feature request for this functionality here: http://highcharts.uservoice.com/forums/55896-general/suggestions/2607304-allow-the-tooltip-to-appear-when-a-point-is-clicke
Feel free to add your votes and comments.
UPDATE:
I have started using the jquery UI dialog for this purpose.
I disable the tooltip in Highcharts, and add a click event to the point in the plotOptions.
In that click function I call an external function, sending it the point object, and build my tooltip within the dialog.
http://jqueryui.com/dialog/
http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could also use Highslide for this purpose, and keep it all in the family.
http://highslide.com/
Working example:
http://jsfiddle.net/jlbriggs/LHZ3E/embedded/result/
Adding for those who has problems like me with useHTML: true and wants to display tooltip only on click and not on hover and wants to have only one tooltip on screen.
Here is a fiddle.

Resources