I would like to have two pie charts to show up on my page, next to each other. They are both the same style but different data.
Is that possible and how?
Thank you
You can have multiple series of pie chart data on the same chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Group Name'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['20%'],
name: 'foo'
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['80%'],
name: 'bar'
}],
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
}
});
jsfiddle: http://jsfiddle.net/4NtBw/
Another solution is to set the same size for both charts. That would disable option to smart resize for pie with dataLabels and you will get two the same size charts both with enabled dataLabels.
Search center at : http://docs.highcharts.com/#polar-chart
It might help
Related
I want to add a logo when printing and exporting Highcharts only.
i tried with exporting and it works fine but with no hope with printing.
http://jsfiddle.net/andrew_safwat/zt5qLwe1/
$(function () {
// create the chart
$('#container').highcharts({
chart: {
events: {
load: function () {
if(this.options.chart.forExport) {
this.renderer.image('http://highsoft.com/images/media/Highsoft-Solutions-143px.png', 80, 40, 143, 57)
.add();
}
}
}
},
series: [{
animation: false,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
any ideas please?
I use stacklabels in my stacked bar chart.
stackLabels: {
rotation : angelLabel,
style: {
fontSize: labelFontSize,
fontFamily: labelFontFamily
},
enabled:true,
color: '#000000',
useHTML: true
}
The code above works well at initialization. Now, I need to change "enabled" to false.
The code below is not working.
chart.options.yAxis[0].stackLabels.enabled = false;
chart.redraw();
How can i change stacklabels dynamically?
stackLabels is a property of a yAxis, so you could update that axis using API function Axis.update()
$(function () {
var chart = $('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
stackLabels: {
enabled: true
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
}).highcharts();
var enable = true;
$('#button').click(function () {
enable = !enable;
chart.yAxis[0].update({
stackLabels: {
enabled: enable
}
});
});
});
Example: http://jsfiddle.net/yqypj4qr/
I am trying to use an image for name in Highcharts Graphs, I have tried the following approach but this doesn't to work,
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: '<img src="http://www.text100.com/wp-content/uploads/2013/03/icon-plug-small.png" >'
}]
Is there any other way to achieve this?
To add html images, you need to set useHTML to true option, where it's necessary (e.g. tooltip, legend): http://jsfiddle.net/a3be47f8/
$('#container').highcharts({
tooltip: {
useHTML: true
},
legend: {
useHTML: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: '<img style="width: 50px; height: 50px" src="http://www.text100.com/wp-content/uploads/2013/03/icon-plug-small.png" >'
}]
});
Note: I advice to set width/height, otherwise it may happen that tooltip/legend won't be able to reserve proper amount of space, because image won't be already loaded.
I am puzzled why the second yaxis in my Highcharts graph shows, but without any values. Both of my two graphs are still bound to the first yaxis. Can't get one of them attributed to the second yaxis. Here is a fiddle.
Thanks for any hints!
The charts options are case sensitive. You specified 'yaxis' when it should be 'yAxis'. That took me a while to spot !
series: [{
yAxis: 1,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
yAxis: 0,
data: [19.9, 21.5, 6.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 94.1, 95.6, 54.4]
}]
I am using Highstock-1.2.4 along with jQuery in my application. In one of the dialog I highstocks stacked column.
My issue is, if there are graph with large y-axis value (eg. 200
unit) along with a graph with small y-axis value (eg. 1 unit), then tooltip for the small graphs are not displayed properly.
For better understanding I have provided example.
In the above example "jan" has very small graph.If u hover over it (i.e jan) u get tooltip for series '3' and '4' which is expected one. Now if you resize the graph (using resize handler present at right corner) to reduce the graph width and then hover over small graph at "jan" youu get tooltip only for series 4 (which is 0).
Please some one guide how to handle this kind of issues.
Sample Code:
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="resizer" style="min-width: 350px; min-height: 200px">
<div id="inner-resizer">
<div id="container" style="height: 300px">
</div>
</div>
</div>
var container = $('#container')[0];
$('#resizer').resizable({
resize: function() {
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType:'xy'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
},
{
data: [5, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
I think its not tool tip issue, when you re size the graph to very small size, one can not judge mouse over so perfectly than regular size.
Even, in the regular size if you over the graph shows tooltip for other series later.
What I can suggest here is try
tooltip:{
shared:true
}
Link: http://jsfiddle.net/mhardik/yPLjR/623/
With this you can get tooltip even with lower size.
EDIT:
Set
plotOptions: {
series: {
stacking: 'percent'
}
}
which will set column height relative to percent. So, you will get bar even for very low values.