Develop Reference

Size of graph in highcharts

I have created piecharts in my django project using highcharts.Each pie is in a seperate div and the width of all divs are set to 25%.I have created the pie using a for loop so they all have the same properties yet the pies differ in size.What could be the reason for this.
This is the code for my div.
var div = document.createElement("div");
div.id = "container"+i;
div.style.cssFloat = "left";
div.style.width="25%"
document.getElementById("main").appendChild(div);
And this is the code for my chart
for(i=0;i<res.length;i++)
{
Highcharts.chart('container'+String(i), {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: server[i]
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Success',
data: res[i]
}]
});
}

Pie size by default is automatically adjusted so that data labels have enough space to be rendered. This behavior can be changed by setting plotOptions.pie.size - the diameter of the pie relative to the plot area.
Code:
plotOptions: {
pie: {
size: '50%' // Can be a percentage or pixel value
}
}
Demo:
with fixed size: https://jsfiddle.net/BlackLabel/yptnreda/1/
without fixed size: https://jsfiddle.net/BlackLabel/zfpd3at7/1/
API reference:
https://api.highcharts.com/highcharts/plotOptions.pie.size

How Can I Make Responsive Titles In Highcharts?

I'm trying to make the title of my highcharts donut chart responsive - here is my current jsFiddle:
https://jsfiddle.net/klstack3/43Lqzznt/2/
HTML
<div class="wrapper">
<div id="container" style="width:100%;height:100%;"></div>
CSS
.highcharts-title {
font-weight: bold;
Javascript
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: "I want this to be responsive",
margin: 10,
align: 'center',
verticalAlign: 'middle',
},
tooltip: {
pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
}
},
series: [{
type: 'pie',
data: [{
name: 'Item',
y: 81.52,
sliced: true,
selected: true
}, {
name: 'Item',
y: 2.91,
}, {
name: 'Item',
y: 4.07
}, {
name: 'Item',
y: 2.07
}, {
name: 'Item',
y: 9.44
}],
innerSize: '50%',
}]
});
$(window).resize(function(){
var chart = $('#container').highcharts();
console.log('redraw');
var w = $('#container').closest(".wrapper").width()
// setsize will trigger the graph redraw
chart.setSize(
w,w * (3/4),false
);
});
The chart resizes with the browser but I can't get the title to do the same - it just overlaps the chart. Any help would be much appreciated!

You can treat the title the same way as you treat the whole chart - set its size on window.resize(). I moved all the code responsible for resizing to doResize function so that it can be called right after the chart is rendered initially (there's no window resize event and it needs to be called explicitly):
function doResize() {
var chart = $('#container').highcharts();
var w = $('#container').closest(".wrapper").width()
// setsize will trigger the graph redraw
console.log('redraw');
chart.setSize(
w, w * (3 / 4), false
);
chart.title.update({
style: {
fontSize: Math.round(chart.containerWidth / 30) + "px"
}
});
};
$(window).resize(doResize);
doResize();
Live demo: https://jsfiddle.net/kkulig/jksp88p1/
API reference: https://api.highcharts.com/class-reference/Highcharts.Chart#.title

How to use json data as highcharts Pie Chart?

I've created an ajax request that returns data like this
Object
negative:3
neutral:3
positive:94
This is directly from console.log();
Im trying to create a pie chart using this data but when I try it doesn't draw the chart and nothing shows up except for the credits and no errors in the console either. But if I manually input data like this:
series: [{
name: 'Brands',
data: [
{ name: 'Positive', y: 94 },
{ name: 'Negative', y: 3 },
{ name: 'Neutral', y: 3 },
]
}]
it works no problem.
My code is:
function pieChart(data) {
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.pie.colors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
// Build the chart
Highcharts.chart('pieChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
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: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
data: data
}]
});
};

The response you've received from server using ajax request is an object.
All you need is to create a json array from the response you've received.
var object={'positive':94,'neutral':2,'negative':2};
var data=[];
for(i in object){
data.push({"name":i,"y":object[i]});
}
And set it to highchart series.
series: [{
name: 'Brands',
data: data
}]

draw pie chart from arrays in highcharts

I want to merge two arrays and display them on chart but can't do it. Please show the correct syntax of drawing that type of chart. If someobdy could provide a jsfiddle link it would be better for my understanding. Thanks.
$(function () {
var name = ['chrome','firefox','opera'];
var data = [11.22,81.54,6];
var final = [name,data];
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Results",
colorByPoint: true,
data:JSON.parse(final)
}]
});
});

You don`t have to merge arrays. You have to build new array with list of objects. Those objects should have structure based on arrays that you provided. Propriety "name", of each object, should get its value form the "name" array. Propriety 'y', in its turn should get value from the "data" array. Something like:
var final = [
{
name: 'chrome',
y: '11,22'
},
{
name: 'firefox',
y: '81.5'
},
{
name: 'opera',
y: '6'
}
]
That is how you can get it:
var name = ['chrome','firefox','opera'];
var data = [11.22,81.54,6];
var final = [];
for(var i=0; i < name.length; i++) {
final.push({
name: name[i],
y: data[i]
});
}
Here is the fiddle: http://jsfiddle.net/ujahc83h/2/

Formatting data for highcharts

I'm trying to make charts with Highcharts, but can't figure out why my data isn't in the right format.
When I use the following array as data my chart does his job.
fake = [['Joe', 0.1576]];
But when I try to make one by pushing elements like this it won't make a chart out of it.
name = 'Joe';
percentage = 0.1576;
element = [];
element.push(name, percentage);
graph.push(element);
When I compare them by getting them in console they seem totaly the same. But where is the difference between them that is causing the problem?
Edit:
Thanks to your help I found where it should go wrong, probably in the $.getJSON and var 'graph' that is not set properly?
graph = [];
$.getJSON("graph.php",function(data){
/* Loop through array */
for (var i = 0; i < data.length; i++) {
graph.push([data[i][1], Number(data[i][3])]);
}
});
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Individuele productprijzen uiteengezet tegen de totaalprijs'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.2f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: graph
}]
});
});
The data it gets is in JSON format made with json_encode in PHP.