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/
Related
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!
im using highchart and I want to hide the xaxis categories (the numbers on the bottom of the chart, please see the below image reference). Does anyone knows how to hide it?
Use:
xAxis: {
labels: {
enabled: false // disable labels
}
}
API reference.
I am trying to create horizontal chart with jQplot and tried all the options. However, the bars are overlapping.
Please let me know if I missed anything.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barMargin: 30,barWidth: 25
}
},
series: series,
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
barMargin: 30
}
}
Check this fiddle here: jqPlot Horizontal Bar Chart
I used the above snippet, and it worked fine for me.
BTW, the series: series isn't defined in the snippet that you provided.
And the bars aren't overlapping in my case. Check the fiddle. Is your code something similar to the one in the fiddle. If not, then please update/post some more code, which will help us investigate the issue.
Hope it helps.
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'
}]