My GWT application consists of a "Dashboard" that has a few charts . I need to be able to hide and show charts as and when necessary.
As you can see in the jsfiddle below, i was able to hide the chart, but the invisible chart eats up mouse events(when the mouse hovers over the invisible chart the tooltips are still displayed).I need to stack another canvas on top of the chart when the chart is hidden.But since the chart is taking up the mouse events , my canvas cannot receive any. Any ideas as to how to fix this ?
http://jsfiddle.net/archerabi/vnBsx/1/
I think it's because you're only hiding the legend instead of the whole container. I changed .highcharts-legend to .highcharts-container and I think it solved that issue. See here
Related
Datalabels on the top bars in chart are getting cut off. Could you please provide me some suggestions
It looks like not the issue of chart.js but of the parent div mainly. You are crashing the divs of the container. Try resizing it
I have this AMCharts v5 which shows a tooltip on top of a data point / bullet
DEMO
I tried to define a position
series.columns.template.setAll({
tooltipX: 10
});
Although I'm not sure this will do what I want it doesn't work. When I add this code no graph is rendered anymore.
So my question is, what is the correct way of positioning this tooltip?
(It should also work when the tooltip is positioned on the right of course)
in this page https://ticr.live/ticker-demo.php
i am showing the data generated roughly in the last 15mins, in a TradingView chart widget.
I wish that all points are visible inside the chart, without the need to scroll the chart left horizontally to see the past values, in case there are many points.
So the whole chart should "fit" exactly the container div.
How is this achieved?
Thanks
Yes, you can fit all your data inside the chart by calling chart.timeScale().fitContent() method.
I'm having what appears to be a highcharts sizing issue. The width of the highcharts svg, and the containing div are the same, and they are sizing correctly (going from 525px to 530px when I bump the window). However the labels act correct after the resize, but not on page load.
Here's what the chart looks like on page load:
You can see the issue with the xAxis labels.
and after I size the window BIGGER (manually with my mouse):
note that I am using angularjs and the angularjs highcharts directive found here:
https://github.com/pablojim/highcharts-ng. I don't think that's related however.
any help you can provide is much appreciated!
Thanks
Probably the labels overlap and Highcharts removes them automatically. I suggest you to give a look at the Highcharts API.
Overflow
How to handle overflowing labels on horizontal axis. Can be undefined,
false or "justify". By default it aligns inside the chart area. If
"justify", labels will not render outside the plot area. If false, it
will not be aligned at all. If there is room to move it, it will be
aligned to the edge, else it will be removed.
Changing the overflow property to "justify" may fix it, but it may not look good. Give it a try.
Another suggestion to fix this, is to give it a fixed size of lines to display the labels, with the staggerLines property. Check this Fiddle and see it fits to your problem.
I need to enable the horizontal scrollbar when I have more Pie Charts than are visible in the container. I am able to do this with other chart types by using Highstock.js and the following:
scrollbar: {
enabled: true
},
This doesn't seem to work with multiple Pie Charts. It will squash the Pie if it doesn't quite fit(which I don't want either), but any overflow Charts are hidden.
See my fiddle:http://jsfiddle.net/4pn5J/5/
The scrollbar only works with stock charts. To get around this, why not make 3 divs inside a "master" div and allow the scrollbar on the div container itself?
EDIT:
Sample using divs and css. Yes, you are using highstock.js but scrollbar is not available on PIE-based charts. Since the xAxis is essentially just he radius of the chart itself.
EDIT2:
Sample using single div container. You will need to fiddle with the chart sizes. Again done with CSS.