I am using highchart library. I am using pie chart. What i want is that when I render pie chart, it should not rotate itself. the data points should adjust itself in the pie chart dynamically. Can it be done?
You can stop the rotation by using animation: false
http://api.highcharts.com/highcharts/plotOptions.pie.animation
see example jsfiddle
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
plotOptions: {
pie: {
animation: false
}
}
});
Related
I am new to highcharts. Is there anyway I can achieve kind of chart functionality using highcharts in which series label are on top and y axis is drawn vertically as shown in this image
Chart
You just can build a chart with multiple y-axes and enabled inverted option:
chart: {
inverted: true
},
yAxis: [{
opposite: true,
width: '40%'
}, {
offset: 0,
opposite: true,
width: '50%',
left: '50%'
}]
Live demo: http://jsfiddle.net/BlackLabel/4eow5np2/
API Reference: https://api.highcharts.com/highstock/chart.inverted
I'm trying to generate a pie chart but when I activate the data labels the chart's width is incorrectly calculated.
Is this a bug or I must to set other options ?
The example :
http://jsfiddle.net/rolivares/Fcca9/6/
plotOptions: {
pie: {
animation: false,
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false,
PD: Toggle plotOptions.dataLabels.enabled = true/false
I am trying all kinds of permutations to make data labels on the spline chart but I just dont know what I am doing wrong.
Any help would be appreciated.
JsFiddle here
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
data: [
[Date.UTC(2005,9,01), 2.02],[Date.UTC(2006,8,30), 7.56],[Date.UTC(2007,8,29), 5.22],[Date.UTC(2008,8,27), 6.57],[Date.UTC(2009,9,03), -4.48],[Date.UTC(2010,9,02), 5.29],[Date.UTC(2011,9,01), 7.44],[Date.UTC(2012,8,29), 3.39],[Date.UTC(2013,8,28), 6.54],
]
}]
Under plotOptions, you are setting the dataLabels option for line charts, not spline charts. They have to match:
plotOptions: {
spline: { // has to say spline here
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
Updated fiddle.
I've encounted a problem when updating data of pie chart by clicking on a button - the legend and title overlap pie chart. But what's interesting is that when I resize the browser, for example, maximize the browser, position of title and legend go back normal.
Problem example is shown at http://jsfiddle.net/HmmeX/3/.
Data is updated by
$('button').click(function() {
// var chart = $('#container').highcharts();
chart.setTitle({
text: 'Browser market shares at a specific website, 2010'
});
chart.series[0].setData(adata, true);/*update({
data: adata});*/
});
That looks like a bug to me. You can work around it by adding size : 300 to your pie options.
chart = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
verticalAlign: 'bottom'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
size:300
}
},
series: [{
name: 'Browser share',
data: []
}]
});
http://jsfiddle.net/xNmLd/
as of now Highchart has a lot of solutions for data visualization but i know it capable of drawing any chart to visualize the data.
I'm looking for dot chart similar to what RaphaelJS has done. Hope the team can share how to draw chart like that soonest..
Thanks
Example in Highcharts: http://jsfiddle.net/HVpSp/
$('#container').highcharts({
chart: {
type: 'bubble'
},
yAxis: {
min: -0.5,
max: 2.5,
startOnTick: false,
endOnTick: false,
categories: ['a','b','c']
},
series: [{
data: [[0,13],[0,16],[0,3],[0,18],[0,6]]
}, {
data: [[1,13],[1,16],[1,3],[1,18],[1,6]]
}, {
data: [[2,13],[2,16],[2,3],[2,18],[2,6]]
}]
});