how can we plot group of overlapping column bars like the image shown. That is not a stacked and grouping chart because within the each group, each item is overlapped but not stacked.(both start from common zero).
http://s22.postimg.org/wun8gxh29/highcharts.png
If you disable the column grouping:
plotOptions: {
column: {
grouping: false
}
},
You can explicitly control the placement of each column.
Fiddle here.
Related
I have a chart that looks like the below. The line is a rolling average of the third column from each category. I would like to position the marker for the line in the middle of the green/yellow column rather than the middle of the black, for each category. Is this possible?
Use pointPlacement property:
series: [..., {
pointPlacement: 0.2,
...
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4810/
API Reference: https://api.highcharts.com/highcharts/series.line.pointPlacement
I have the following columnrange chart:
http://jsfiddle.net/2a2asax2/1
My problem is, that some of the columns in the "closed" category are plotted on top of each other. How do I separate them, so that they are printed underneath each other instead?
We have a chart with two datetime series to display stock development over past years.
First series is a line chart with a data item for each month.
Second series is a column chart with a data item for every year.
I've put together an example: http://jsfiddle.net/kaiw/8E9nJ.
...
xAxis: [{
type: "datetime"
}]
...
We would now like to place the lables on the x-Axis between the ticks, like you can do for a category axis.
We have to work with datetime values and can't use categories because of the different number of data items per series.
Is there any other way how we can place the label between ticks?
According to documentantion tickmark is avaiable only for categorized axis. You can use x parameter for labels and set hardcoded value like in the example: http://jsfiddle.net/8E9nJ/3/
xAxis: [{
id: "xAxis",
type: "datetime",
title: null,
labels:{
x:40
}
}],
I am using the highcharts javascript library with the column chart. What I am trying to do is show an image in a tooltip when the user rolls over the column. I am able to show images, but not the one I want.
I have an array of image links
var imagesLinks = ["img1","img2","img3","imgN"];
What I am trying to do is show the image based upon which column they are on so if they on the first column it would show imagesLinks[0], third column would show imageLinks[img3] etc.
Basically I need to know how to get the column index. I found this code below that helps me get the images on click, but it does not really help with the tooltip.
plotOptions: {
column :{
point:{
events:{
click:function(){
console.log(this.x);
}
}
}
}
},
I have found the answer.
Inside the formatter function you use this.point.x
I have seen the demo for drill down column chart, but I want to add it to stacked column chart.
http://www.highcharts.com/demo/column-drilldown
There is no drill down option in data series for stacked columm ? e.g.
"series":[
{
"name":"John",
"data":[5],
"drilldown":[
{"name":"a","data":[25]},
{"name":"b","data":[43]},
{"name":"c","data":[24]},
{"name":"d","data":[23]}
]
}
]