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
Related
I want to use combination charts to show horizontal bar chart along with line chart.
But the line i want should be same as the way it is shown in the column chart.
The line chart should not be inverted along the axis when the other series is converted to bar chart.
How can i achieve this ?
line_bar_chart
You can combine line and x-range series types:
series: [{
type: 'xrange',
...
}, {
type: 'line',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/ex2a8o70/
Docs: https://www.highcharts.com/docs/chart-and-series-types/x-range-series
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'm trying to create the powerpoint chart below in highcharts however as you can see the order of the series do not match. The legend and the categories match but I'm not sure how to make the series order match?
This is what my highcharts replica looks like (link to jsfiddle: (https://jsfiddle.net/6qxukd74/1/)
How can I make the highcharts look exactly like the powerpoint chart?
Add to the yAxis the reversedStacks property
...
yAxis: {
min: 0,
reversedStacks: 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
Is there a programmatic way to provide axis labels for individual bars in a grouped bar chart in HighCharts?
Use case: The use case is when dealing with a graph that is both grouped and stacked. With these graphs it is hard to visually convey (without a tooltip) what the individual bars represent, unless they have individual labels.
Default behavior:
As an example see the HC demo for a stacked and grouped column graph, in which it might initially be unclear that the individual bars in each cluster represent different genders: http://www.highcharts.com/demo/column-stacked-and-grouped
Goal: Here is an illustration of what I am trying to achieve. Is it possible to do this programmatically, such as with a second x-axis? Perhaps another idea would be to use clever placement of the stack total, but of course that would get in the way of showing the actual stack total.
There are a few options which may help you.
Firstly, the stackLabels formatter allows you to determine what is in you label.
Secondly, veticalAlign:"bottom" allows you to position the labels at the bottom of the stack.
Thirdly, the 'y' option allows you to move the label relative to its default position.
The catch is that you can't seem to move the label outside of the chart plot area. One way round this is to start your y-axis at a negative value to give room for the labels. You can then move the position of the x-axis into the chart area.
http://jsfiddle.net/WY6QB/
xAxis: {
offset:-43,
labels:{
y:40
},
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
stackLabels: {
verticalAlign:"bottom",
y:20,
enabled: true,
formatter: function() {
return this.stack;
}
}
The only thing left is to try to remove the spurious '-2' y axis point.
-EDIT-
If you set startOnTick to false, and give the y-axis min as -1.9, the spurious -2 point goes away.
min: -1.9,
startOnTick:false,
http://jsfiddle.net/V6Cp2/
It is not exactly the same result as your image, but it displays the stackLabels:
yAxis: {
...
stackLabels: {
enabled: true,
formatter: function() {
return this.stack;
}
}
},
It displays the label at the top of the column.
Example
You can use grouping categories plugin.