When I create a nested group chart, right side border not drawn if only one nested group
example:
jsfiddle.net/gmrpY/7
You can set max range in X-axis to eliminate this problem
xAxis :{
max:0.5,
},
Related
Is there a way to order the column display in order to force the columns with smallest values forward (higher z-index)?
Here's a non-grouped column chart, which is accomplished by setting the grouping: false in the column settings for the plotOptions.
The idea is to always have the smaller bar on top (if there are multiple bars, continue stacking the taller ones behind). Notice this example uses transparency to circumvent that issue; however, the new color is not reflected in the legend.
I've scoured the Highcharts API but couldn't find much information.
In order to do what you're asking, you would have to set a z-index value for each data point in each series (similar to how you can set a unique color for each data point, such as data: { y: 10, color: 'blue' }).
Unfortunately, the Highcharts API doesn't recognize z-index values for individual data points. Different z-index values can only be applied at the series level.
You may want to consider translucent columns with different widths, as shown in the "fixed placement columns" demo: http://www.highcharts.com/demo/column-placement
I hope this information is helpful for you.
I'm in the process of evaluating Highcharts as a replacement for our current platform, and have some questions about how we can replicate one of our existing charts:
I've been able to recreate the basic floating stacked column chart, but need help with some of our specific features.
1) Is is possible to replicate the multiple y-axes with the columns displayed to the right of each within a single chart? If not, I suppose we could do 3 charts next to one another - and draw our own titles above (and data table below). If we go this route, is there a way to group all these elements in a single "container"? We need to export these charts to images and need to end up with a single image that looks like the one attached.
2) How would I create the inner box within each column? Do I need to draw it myself, or can I create another column series with a border and transparent fill and somehow set the width of the column to be less than the width of the main columns (note that the number of columns on each chart is dynamic, so the column widths can't be a fixed size. i.e. the inner box width needs to be a percentage of the main column width)?
3) Assuming #2 is possible, I could probably use the same technique to plot the horizontal line - just make the height 0 (or very small) and make the bar wider instead of smaller. Is there a better way?
4) How do I get the x coordinates of the columns so we can align our data table under each column?
5) Can I separate the individual points within the column. You'll notice in my jsfiddle, product 1 and product 2 are vertically aligned in the center of the column. Can I spread them out within each column as the 2 points are in the screenshot?
Thanks in advance for advice on all or any of the above.
Mike
1) You can use multiple yAxis, see the example
2) You can use renderer or mix column/column range and border parameter, example
plotOptions: {
columnrange: {
pointPadding:0.2,
color: 'rgba(255,255,255,0)',
borderColor: '#303030'
}
},
3) Use renderer, as above or scatter series with customied marker
4) Column is shape in point.element.graphic, so you can extract it.
5) as far as I know, it is not possible
I'd like to add an element (a circle) above some of the columns in a Highchart generated chart. In this chart, columns are stacked, to visually compare two series. But sometimes I need to draw a circle above some of these columns to show this year something special happened. I've tried to create a dummy serie, with bubbles but it doesn't work. So I believe that draw api is a better option, but I don't know how to calculate where I have to draw, to set element attributes x and y.
You can use image renderer http://api.highcharts.com/highstock#Renderer.image() or more user friedly, scatter series which allows to define your own markers (like images). http://jsfiddle.net/cKKhF/
{
type:'scatter',
showInLegend:true,
data:[10,9,11,11,8],
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]
Is it possible to show the x-axis and corresponding labels on top of the graph instead of the bottom?
Inverting or reversing the data is not what I am looking for design wise.
Yes. In your xAxis properties, set 'opposite:true'
http://api.highcharts.com/highcharts#xAxis.opposite