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
Related
I have a couple of questions while dealing with Pie Charts in High charts.
How to change the legend's shape apart from the circle.
I want to display legends in data labels prior to percentage values.
And also with an increase in data, data labels are not radical to the pie chart. How to fix this.
my chart options :
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.percentage:.1f} %'
},
showInLegend: true
},
},
series: [{
name: 'Brands',
colorByPoint: true,
dataLabels: {
connectorWidth : 0
},
showLegends: true,
data: [{
name: 'Chrome',
y: 61.41,
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
my code pen
Would be grateful if I get an answer to any of my questions.
The API allows customizing the legend symbol by setting options like symbolRadius or symbolHeight.
Demo: https://jsfiddle.net/BlackLabel/1m98xgvr/
API: https://api.highcharts.com/highcharts/legend.symbolHeight
If you want to change the legend symbol to the custom png try to use this solution:
Custom Highcharts legend symbol
You can set the dataLabels.useHTML flag to true and use the dataLabes.formatter callback to customize the output which will be an outstanding HTML element.
Demo: https://jsfiddle.net/BlackLabel/2sog3znq/
Here I am not sure what do you have in mind - could you explain it more precisely?
What I am trying to achieve is to have a highcharts that width continues increasing as data points increase
currently, I have the following
AM using vuejs with highcharts but should be similar to jquery or others
<div class="col-md-6" style="overflow:auto"> //set overflow css
<div id="container_h"></div>
<div>
now the script code that renders the highchart
this.chart = Highcharts.chart('container_h', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
categories: this.ranges
},
yAxis: {
min: 0,
title: {
text: 'Total trucks'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: this.chartdata
});
The above renders a chart with the
What I am looking forward to achieve is this: the highchart columns to have a fixed width which when it grows it creates a scroll on x-axis so something like this
that has a scroll area
How do I achieve this?
You need to use highstock.js.
There is already an answear there: How to make highcharts scrollable horizontally when having big range in x-axis thanks to #Gopinagh.R
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a
stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations http://api.highcharts.com/highstock#scrollbar.
http://jsfiddle.net/gopinaghr/kUSyF/1/ I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
} Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories. find the fiddled example http://jsfiddle.net/gopinaghr/kUSyF/293/
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 can I customize to make the smallest pie visible?
Youtube can't be seen as you can see from here: http://d.pr/i/nxeP
Here's my code ( my fetcher is in RAILS ):
$(function () {
//for donut
var data_series = <%= raw get_all_identities(#user) %> ;
var getColor ={
facebook: "#3d599b",
twitter: "#00abee",
instagram: "#736c59",
soundcloud: "#fa3d00",
youtube: "#d43c3b",
tumblr: "#3d5a71",
vine: "#00b589",
foursquare: "#0abadf",
linkedin: "#0abadf",
vimeo: "#1ab7ea",
fivehundredpx: "#000000",
wordpress: "#257ba0",
rdio: "#028ed4",
behance: "#000000",
flickr: "#ff0084"
};
$('#user_follower_chart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.2f} %'
},
startAngle: -90,
endAngle: 0
}
},
series: [{
type: 'pie',
name: 'Followers By Network',
allowPointSelect: true,
innerSize: '50%',
data: []
}]
});
var follower_chart, n, i, len;
for (i = 0, len = data_series.length; i < len; i++) {
n = data_series[i];
if (n[1] !== 0) {
follower_chart = $("#user_follower_chart").highcharts();
follower_chart.series[0].addPoint({
name: n[0],
y: n[1],
color: getColor[n[2]]
});
}
}
The red slice is visible, and appears to appropriately scaled.
I'm not sure what you expect to see for a slice at 0.2 %...
two things I would suggest:
1) set the borderWidth 0, and the slices will stand out a little more clearly.
2) this should really be a bar chart anyway.... if you make it a bar chart, you can set the minPointLength property so that small data points are still apparent.
example: http://jsfiddle.net/jlbriggs/4FxYg/
You can also try to use innerSize parameter
http://api.highcharts.com/highcharts#plotOptions.pie.innerSize
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.