In Highcharts is possible to drag and drop a series in a line chart, as explained here. But I need to drag the chart itself (i.e. the background) to show past/future data, not the lines. Is this possible with Highcharts? I couldn't find a way in the documentation.
According to the comments - using the panning feature is a looking solution for this case.
Demo: https://jsfiddle.net/BlackLabel/xu36wmj4/
chart: {
panning: {
enabled: true,
type: 'xy'
},
panKey: 'alt',
zoomType: 'xy'
},
API: https://api.highcharts.com/highstock/chart.panning
Related
I have a chart that has been designed that I'm working on and I have a few questions.
First, can I remove the grid lines etc. from the grid and just show a stacked bar graph with no axis/ticks etc.
Here's a link to the designed graph: UI of simple stacked bar chart
Thanks!
You can simply hide both axes to achieve the desired result:
yAxis: {
visible: false
},
xAxis: {
visible: false
},
Live demo: http://jsfiddle.net/BlackLabel/gspgunzj/
API reference: https://api.highcharts.com/highcharts/xAxis.visible
As you can see, I have ranges of dates in highchart:
In highstock, I do not know if I can do the same because I can't find examples in the documentation.
Can anyone help me?
You can get pretty much the same chart with highstock, just remove navigator and rotate chart and enable data grouping. Example below:
chart: {
type: 'columnrange',
renderTo: 'container',
inverted: true
},
and
dataGrouping: {
enabled: true
}
Live example: http://jsfiddle.net/yj54ojzs/
I have a Highstock chart with Navigator which is synced to 4 Highcharts on same page. The Highstock dates don't line up with Highcharts dates plus it's a different format.
Highstock and Highchart:: xaxis:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
year: '%Y'
},
events: {}
},
Here's the site I'm working on, the file is to large for here. Click on any icon, then pick "Data and Charts". The top chart has a different date format and the bottom charts points don't line up with top chart. I'm sure its default behavior of both Highstock and Highcharts but I can't find a way around problem.
Any help would be greatly appreciated,
Michael
Your first chart, being a Highstock chart, has an ordinal x-axis (API). The other charts do not, as it is not part of Highcharts. You can solve this by setting it to false for the first chart:
$('#container1').highcharts('StockChart', {
xAxis: {
ordinal: false,
// ...
}
// ...
});
This also seems to fix your date formatting problem (I'm not sure why).
I have a question about highchart's overlapping data labels. I have 2 spline data series and as you can see here http://jsfiddle.net/3E8V4/ some data labels are overlapping.
Question here is: is this overlapping even possible to prevent? If yes - how should I do it?
Code for plotoptions is like that:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True',
crop: false,
overflow: 'none'
},
enableMouseTracking: false
}
},
You can use that plugin for repositioning dataLabels: http://jsfiddle.net/menXU/1/ It's not perfect, since works only for max 2 series and requires disabled animations, or you will see little delay when repositioning dataLabels.
How to use? Copy StaggerDataLabels and isLabelOnLabel functions, and then use StaggerDataLabels in load and redraw events for chart.
Sobis,
I don't have a answer that is exactly what you are expecting.
In this case what i would do is increase the max of yAxis by 10% of the maxi m of the data.
provide zoom in/out. that will enable the user to get a values on top of the points
zoomType: 'xy'
here is an example http://jsfiddle.net/3E8V4/1/
hope you will find it useful
My goal is to have an arearange chart with bolded only top "border" with additional markers just on hover. I was trying to achieve with just one arearange graph, but I think it is not possible with arearange chart (linewidth works for both bottom and top border, and I am not able to show marker at all...). I have decided to go on with additional spline chart that would exactly overlap the top border of arearange chart. I have provided the working example in here:
in jsfiddle go to check: /ZvZDZ
As you can see on the top of the chart, spline graph does not exactly over lap the arearange chart, although data is this same.
Is there a way to fix that, so those both graphs would overlap
maybe there is a way to use just arearange chart without spline chart?
any help would be appreciated
I think you should use or:
line series and arearange
spline series and areasplinerange
Just mixes spline and arearange will provide example you can see. Unfortunately using only one arearange series is not possible - markers are disabled.
Example: http://jsfiddle.net/ZvZDZ/2/
Code:
series: [{
type: 'areasplinerange',
name: 'areasplinerange',
data: areaData,
marker: {
enabled: true
}
}, {
type: 'spline',
name: 'spline',
data: splineData
}]