Related
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/
I am looking for help in implementing multi-level drill down with Highcharts async drill down. I was able to implement the drill down to first level but i need drill down to one more level. Below is sample example which i am using for reference. In below example i can drill down to "Animals","Fruits" & "Cars". I also can click on Sheep and able to drilldown but how can i add series which will be displayed after i click on Sheep. Thanks for any help..
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
{name: 'Sheep',
y:5,
drilldown: true
},
['Cow', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
Since their sample code references the point's name, should should create the drilled down values in the "drilldowns" dictionary using the data's parent name as the dictionary key. Here is an example of drilling into Dogs:
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
{name: 'Dogs',
drilldown: true,
y: 2
},
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
},
"Dogs": {
name: 'Dogs',
data: [
{
name: 'Rottweiler',
drilldown: true,
y: 6,
}, {
name: 'Pit Bull',
y: 2,
}, {
name: 'Poodle',
y: 4,
}]
},
"Rottweiler": {
name: 'Rottweiler',
data: [
['male', 4],
['female', 2]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 200);
}
Notice I added two new keys: "Dogs" and "Rottweiler".
Hope that helps.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2, true],
['Sheep', 3, true]
],
keys: ['name','y','drilldown']
},
'Sheep': {
name: 'Sheep',
data: [
['Red', 2],
['White', 1]
]
},
'Cows': {
name: 'Cows',
data: [
['Red', 1],
['White', 1]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5, true],
['Oranges', 7, true],
['Bananas', 2]
],
keys: ['name','y','drilldown']
},
'Apples': {
name: 'Apples',
data: [
['Red', 3],
['Green', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
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.