I've got to a point with this chart where I have a stacked column chart drilling down to a stacked area chart - the big issue has been maintaining the colours for the different layers of data in each stack. That is now sorted but I have a further issue.
In the stacked Area chart I can see the markers for each point but I can't get the area to fill. Not sure why as the markers indicate the right points from the data.
Please help.
Here is the code
plotOptions: {
column: {
stacking: 'normal'
},
area: {
stacking: 'normal',
colorByPoint: true,
colors: ['#2B6E97','#4184AD','#589BC4','#6FB2DB','#86C9F2']
}
},
http://jsfiddle.net/robdwright/uxo2edzu/53/
Thanks
Rob
Related
I am working with Highcharts Bar Graph (vertical) and I would like to have the Members data to appear on top of each bar (hovers we will keep as well which is working). I've tried various ways with plotOptions and could not get this to work to show Members data on top of the bar graph view. The first link is my working code.
**https://codepen.io/jenfloods/pen/jOyXEQd**
The second link above is the example is how I would like the data text to appear on top of a bar graph with white shadow letters but this would apply to my vertical bars and not horizontal as this example shows.
**https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bar-datalabels-align-inside-bar/**
Anyone has an example or can work with my code to make it happen?
You need to enable data labels for series and use the configuration like below:
plotOptions: {
series: {
...,
dataLabels: {
rotation: 90,
verticalAlign: 'top',
y: 10,
align: 'left',
inside: true,
enabled: true,
color: '#FFFFFF'
},
}
}
Live demo: http://jsfiddle.net/BlackLabel/y04j6z3m/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.dataLabels
I am creating this bar chart using high charts. The alignment of the bar is not in the middle of section(like first red bar is not in middle of the Jan, 2016). Is there any option to place all bars in middle of each sections?
I found the solution for the issue.
plotOptions: {
column: {
pointPadding: 0.5,
borderWidth: 2 ,
groupPadding: .5
}
}
Hi all I am using high stock to visualise my data. In that plot line is hiding behind the trend.is there is any way to show the plot line above the trend. and also movement of plot line become hindrance when the chart is loaded with large data sets.
I have attached image for reference. Here plot line is hiding behind the trend.
You should use the zIndex option of plotLines to solve this problem.
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
}
You can see the live example in this jsFiddle.
I really want to know how to make datalabels always in center of each slice in pie chart.
The normal state look like this(you can also see this example here)
$('#container').highcharts({
chart: {
type: 'pie'
},
plotOptions: {
pie: {
center: ["50%", "50%"],
dataLabels: {
distance: -50
}
},
series:{
events:{
load:function(){
console.log(this.chartWidth, this.chartHeight);
}
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
But, when I decrease the width or height of this chart, datalabels combined, which look like the image below. I think it is the problem of distance property. I've tried to change distance dynamically but failed.
As a result, what I want to do is to locate datalabels always in center of the each slice even decreasing/increasing chart size.
This is a tough one. From my experiences, there's not (currently) a way to explicitly center the labels directly in the middle of each pie slice. I've tried positioning the labels as you did in your example with the same (unsatisfactory) results, especially in smaller browser windows.
I'd recommend either using a legend to show the categories/types in your pie or consider using a stacked bar chart instead (see http://www.highcharts.com/demo/bar-stacked).
I hope this is helpful!
Hie,
Im working on ExtJS 4 charts.
I want to have a column chart and area chart together.
I did render these together, but the problem is - the area chart is placed over the column chart.
I'm looking for some attribute/hack, that will render the area chart BEHIND the column chart!
Sorry, I cannot place the actual code here, as i've implemented fusebox framework, so many things had to be configured.
Sample code from the extJS examples will suffice,(thanks for your time)
Thanks in advance.
They render by order. If you first define Area Chart and then define Column Cahrt in the Series part it should work.
series: [{
type: 'area',
axis: 'left',
xField: 'yourxField',
yField: 'youryField'
}, {
type: 'column',
axis: 'left',
xField: 'yourxField',
yField: 'youryField'
}]