Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
The download image cannot display all items,
as you can see it will follow scrollbar.
Current download image
image 1 highcharts with scrollbar download image cannot show all items
image 2 Seems download image will follow scrollbar
Demo
http://jsfiddle.net/puff0211/o3tfs2vh/
Desired download image
image - display all items on download image without scrollbar
xAxis: {
type: 'category',
title: {
text: null
},
//min: 0,
//max: 4,
scrollbar: {
// enabled: true
},
tickLength: 0
},
After I disable scrollbar, the download image is correct, but I need the scrollbar on page...
Demo
http://jsfiddle.net/puff0211/o3tfs2vh/1/
Does anyone know to accomplish following conditions?
highcharts with scrollbar on page
display all items on download image without scrollbar
Thank you!
You can define options for an exported chart by setting exporting.chartOptions.
Disable scrollbar and reset min/max values:
exporting: {
chartOptions: {
xAxis: {
scrollbar: {
enabled: false
},
min: undefined,
max: undefined
}
}
},
live example: http://jsfiddle.net/rr8pxoLx/
Related
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
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
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 have a simple chart with six data objects, three lines and three bubbles. Each line shares the name with its corresponding bubble. How can I join each pair so that I can have an onClick event on either series to make them disappear?
I'm also not sure why disabling the legend is overriden:
plotOptions: {
showLegend: false
}
JSfiddle
Have you seen this question? Maybe it can be useful to you.
But for hiding the legend I didn't find the showLegend property. To hide the legend there is a property of legend - enabled:
legend: {
enabled: false
}
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