I have a highchart with a legend (layout=vertical). Unfortunately the legend height has an impact to the pie. This means the more items the chart has the smaller the pie chart. Also the container height seems also have an impact.
My aim is to have a fixed pie size and the wrapper container should grow with the legend height. Is this possible? How?
Here is the js part:
$(function () {
var chart;
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend:{
align: 'center',
enabled: true,
layout: 'vertical',
verticalAlign: 'bottom'
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7],
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7],
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7],
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
And here is the HTML part:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
You can get legend height, add it to the actual chart height and set a new height using setSize function on load event. Take a look at the example posted below.
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart.html#setSize
Example:
http://jsfiddle.net/5hjwtvz0/
Related
See the following example:
http://jsfiddle.net/klodoma/2xgkzyh4/
Is there any setting to place the labels more properly without adjusting them independently?
Firefox should be more up, Others should be more up and right...
Code:
$(function () {
$('#container').highcharts({
title: {
text: 'Browser market shares at a specific website, 2014'
},
plotOptions: {
pie: {
dataLabels: {
connectorWidth: 12,
style : {
fontSize: 25
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
I've always found label positioning for pie (as well as polar and spider) charts difficult to manage. Depending on your data and your desired format, they can be very fussy and unruly to position as you'd prefer.
I'd suggest removing the labels altogether and go with a legend instead. I've updated your code snippet with this concept.
Please let me know if this is helpful for you!
$(function () {
$('#container').highcharts({
title: {
text: 'Browser market shares at a specific website, 2014'
},
legend: {
enabled: true,
borderWidth: 1,
borderColor: 'gray',
align: 'center',
verticalAlign: 'top',
layout: 'horizontal',
x: 0, y: 50
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: { enabled: false },
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
I have more than 1 highchart on a single webpage. However when I refresh the page I get another context menu button added to the additional highcharts. I have tried destroying the highchart before recreating to fix this but that didnt work. Any ideas how i can stop the context menu buttons from incrementing with page refreshes?
// Submits form values and ...
$('#dateform').submit(function (event) {
var data = $(this).serialize();
var monthSelect = $("#month option:selected").text();
var yearSelect = $("#year option:selected").text();
$("#reportDate").text(monthSelect + " " + yearSelect);
//-------------------------------------------------------------------------------
// Procedures - Bar
$.getJSON('reports_procedure_count_bar_ajax.cshtml', data, function (chartData) {
// Build the chart
$('#container1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
$.getJSON('reports_procedure_count_bar_ajax.cshtml', data, function (chartData) {
// Build the chart
$('#container2').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
return false;
});
I'm having problems with the generated caption for the chart using Highcharts,
In this example, the problem this error is generated in the legend of "IE" and "Firefox".
What causes this error and how to fix
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox < 2', 45.0],
['2 < IE <= 3', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari > 1', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
If you set useHTML as true, problem will be fixed.
dataLabels: {
useHTML:true,
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
http://jsfiddle.net/5rNK6/1/
How can I set the opacity for the fill color in the pie chart? I am using the highcharts js library. See code below:
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: 'none',
type: 'pie',
},
title: {
text: 'Health'
},
plotOptions: {
series: {
borderWidth: 0,
fillOpacity: 0.1,
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', ],
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
A bit of a JS newbie, so please be kind. Thanks!
I'll be kind. You can specify the color in rgba format with the fourth parameter being the opacity. See 'Chrome' below:
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true,
color: 'rgba(150,100,50,0.1)'
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
Here's a working fiddle: http://jsfiddle.net/manishie/62VJJ/
The above solution works fine if you know what color you wish to assign to the slice. But if the color is picked from a palette which is generic, there is no way to give the opacity. It always takes 0. For example:
Highcharts.chart('container',
{colors: [my palette]},
series:[{
type: 'pie',
data: [1, 2, 3]
}]
)
In the above case if I set series: [{fillOpacity: 0.5}] it is not honored.
The only option I see is that the palette should have the colors in rgba format. This may not be possible since my palette is a generic palette. Is there any other way in which I can set the opacity of the slices in a pie chart.
I'd like to overlay a custom layer over a chart (e.g. a comment, author). Reading the API there seems to be already an object for the purpose:
A HTML label that can be positioined anywhere in the chart area.
I tried using this on one of the example charts but it has no effect (see below), although the interpreter isn't issuing any error. Am I doing something wrong or should a lable of this kind be created some other way?
Thank you.
chart = new Highcharts.Chart({
chart: {
renderTo: 'pie-container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#FFFFFF',
connectorColor: '#FFFFFF',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}],
labels: [
{html: "<b>This is a label!</b>",
style: {
left: '100px',
top: '100px',
width: '50px'}}],
});
});
});
labels should be an object.
Then you have to add each label as an element of items.
labels: {
items: [{
html: "<b>This is a label!</b>",
style: {
left: '100px',
top: '100px',
width: '50px'
}
}]
}
Demo