I would like to use Highcharts and I need to pan/zoom outside displayed data.
I need to pan/zoom (on both sides) outside the loaded data to load new data from my database.
What I want to do with Highcharts
Currently I'm using the Plotly graph, but its not handling touch devices (pinch zooming) at all.
thanks,
s.
You can set min and max properties for xAxis:
xAxis: {
ordinal: false,
min: -999,
max: 1999
}
Live demo: http://jsfiddle.net/BlackLabel/rx4ewu7n/
API Reference: https://api.highcharts.com/highstock/xAxis.max
Related
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
I want to decrease the tickinterval of primary y-axes in my dual axes chart so that the columns height could increase. Chart is working well but due to high intervals, columns height is getting small. The data is dynamic and will remain the same as I have used in the example on jsfiddle.
Please see the jsfiddle i have created for this.
`http://jsfiddle.net/mr6dyh94/2/`
You have to set alignTicks property to false. In API documentation we can read:
tickInterval: number
...
If the chart has multiple axes, the alignTicks option may interfere with the tickInterval setting.
chart: {
alignTicks: false
}
Live demo: http://jsfiddle.net/BlackLabel/dcpz592x/
API: https://api.highcharts.com/highcharts/chart.alignTicks
I have in excess of three years data being shown along the xAxis of a graph.
I'd like a user to be able to zoom into the xAxis to view data points more closely (yAxis doesn't need to change), by clicking buttons that will show "1 month", "6 months", "1 year" worth of data points in the visible chart area.
I can achieve this zoom using chart.xAxis[0].setExtremes(startDate, endDate) but I'd then like the user to be able to scroll along the xAxis at the specified zoom level to view the data that is off the side of the visible chart area and this I can't work out.
I imagine the issue is that setExtremes sets specific start and end points to the visible area, whereas what I really want to do is limit the view by a generic time period.
Appreciate any pointers!
I recommend you to use Highstock. You will be able to create a stock chart with additional features that you need or create a chart with scrollbar.
scrollbar: {
enabled: true
}
Live demo: http://jsfiddle.net/BlackLabel/8L0aj1wt/
Thanks for the Highstock recommendations #ewolden & #ppotaczek I can see it does have the right kind of functionality, but I managed to solve it by adding the following (panning, panKey and pinchType) to my chart options:
chart: {
type: 'spline',
panning: true,
panKey: 'shift',
pinchType: 'x',
}
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
I'm trying to create a column chart (Highcharts) with a fixed width (range) for all the columns. I have around 300 columns, and I want to draw them actually as lines, and that's why I assign a very small range (0.001) for each of them.
The data format is basically like this: [numberId, min, max].
However, sometimes the height is shown correctly... but some other times it appears with strange height, not even the same for all the columns. I have tried many different things but I didn't manage to find the problem.
This is the jfiddle http://jsfiddle.net/deSSf/3/ (if you resize the area for the chart you will probably see the effect). The fiddle is actually using HighStock, but this chart should be from highcharts lib.
I have screenshos but can't post them.
The code is very simple:
chart: {
renderTo: 'container',
type: 'columnrange',
},
series: [{
data: [[1,0,0.001],......]]
}
There is huge difference between Highcharts and Highstock. In Highstock you have access to dataGrouping which collects data and groups when there is to many points to display on a chart.
Disable it to have working example: http://jsfiddle.net/deSSf/4/
dataGrouping: {
enabled: false
}