Highchart js zoom remove labels of series from legend - javascript

I have a highstock from highchart.js that contains a lot of series.
The series are time based (value per day). The chart has zoom enabled.
I'm trying to hide the label in the legend box of a series when I zoom in and this series is not present in the current zoom date window. Any idea how I can do that ?

Use afterSetExtremes event handler, where you will just remove series from your chart. When resetting zoom you will add all missing series.

Related

Antd Charts - Area chart series values plot relative to last series

I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.

Is there an after render event for Highchart bubble legend clicks?

For a Highchart bubble chart I've got a hook in the chart events for render such that it looks at the bubble and datalabel and that relocates the datalabel when an overlap with another label occurs. It also figures out the x,y of the bubble and datalabel and draws a leader line from the label to the bubble. That works pretty well except for the case when the legend item is clicked to filter the bubbles. When Highcharts moves stuff around in this case, the render event series data has the x,y values from BEFORE the move which goofs up where the lines are drawing to.
Optimally, I'd like like know when the chart is completed renderering after the legend filter changes, then I can run the same logic to avoid collisions. At the moment, the collision logic I have is getting the location values before the legend filter process has laid out the elements. When I debug and toggle on/off the legend filter I see the new location in the series point datalabels so it leads me to believe the new values are there after the legend filter layout does it's thing.

Is possible to have bar chart with stacking option plus overlay feature along in highchart

I have plotted chart bars as Stacked, but overlapped one on another. but only last two series need to overlap, not first one. First series(additional income) need to be plot as same as 'stacked : "normal"' do.
Here is the jsfiddle to explain my experiment with highchart.
Is there any option for Series object to achieve that?
Thanks
Peter
You should disable gruping or set pointWidth http://api.highcharts.com/highcharts#plotOptions.column.pointWidth

HighStock: Add series dynamically introduce gap

Adding series dynamically introduce gap in the existing series.
http://jsfiddle.net/anandc999/6XRuY/
Steps to reproduce
1. load the above url
2. click any where in the candlestick (OHLC)
3. move the mouse with in the candlestick
4. click again with in the candlestick chart
Observe a new series is added but a gap is introduced in the existing Volume and OHLC series.
How to add series without a gap?
Already tried gapsize and connectNulls but doesnt work. Can anybody help?
Thanks
Anand
The problem is with ordinal axis in Highstock. This option forces to display points evenly on a chart, so when new points are added - it recalculates position of each points.
To prevent that set ordinal: false, see example: http://jsfiddle.net/6XRuY/7/
Code:
xAxis: {
ordinal: false
},

Prevent Highcharts to redraw Axis' scale

I was wondering if there is a way to prevent Highcharts from recalculating and redrawing the scale of the Axis when I add a new serie.
What I need to do is the following: I have a scatter chart with a lot of data; when the user selects a point, I add a new series with a "line" type. This series' points are a limited sample from the previous ones, so no "real" new points are added, but the scale of the xAxis changes.
Setting xAxis' min and max value, startOnTick and endOnTick to true did not solve the problem. Any idea?
Edit:
As I wrote, the way Highcharts handles axis' scales is still a mistery to me. In my case, I was rendering one scatter and one column graph on the same canvas. In response to a user click, I was adding 2 new series: a line serie and a column serie each one based on a subset of the original data. The problem was caused by the column graph: when you add a new serie to a column graph, bars are not overlapped, but redistributed, thus creating the scale change effect.
Try to create the line series but hidden, and when you want to show it use chart.series[1].show().

Categories

Resources