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'
}]
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 trying to display a stock chart with columns. But there is a strange issue I am facing right now. Even when the chart is completely zoomed out I am able to drag it.
Fiddle link: http://jsfiddle.net/j8cqzm4x/1/
Highcharts.stockChart('container', {
chart: {
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: [10,20,30,40,50,60,70,80,90,100]
}]
});
Can this behavior be avoided somehow? I have went through the documentation and none of the properties I have tried worked.
Note: In the same chart making the series as 'line' does not reproduce the same behaviour.
I contacted the Highcharts support for this. It seems there was an issue in highcharts which they have already fixed on the master branch. Using the updated code resolves the issue.
http://jsfiddle.net/j8cqzm4x/4/
<script src="https://github.highcharts.com/stock/highstock.js"></script>
That is all that was needed, using master branch form github.
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!
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
http://jsfiddle.net/XPK3f/
I am looking to add the wedges of Pending Issued Closed actually on the wedges.
I believe the changes need to be made in one of these objects.
seriesDefaults:
labels:
visible: true,
template: "${value} ${category}",
series:
type: "pie",
data: dataSet
Here is an example of how the series will have labels in the actual chart and not just on the legend. Please see the JSFIDDLE for details.
Thanks!
pie chart http://www-958.ibm.com/software/data/cognos/manyeyes/images/pie-chart.gif?1292295884
I'm not 100% sure what you are asking, but yes, using a template inside the series-defaults labels, you can put pretty much whatever you need as the label.
seriesDefaults: {
labels: {
visible: true,
template: "${category} - ${value} clients"
}
}
http://jsfiddle.net/XPK3f/2/