have been trying to prevent this clustering but nothing is coming through. have tried overlays, distance, rotation but the labels are still clustering. How do i prevent them from overlapping?
<script>
$(function () {
$.getJSON('/Administration/Dashboard/PieChartDrilldown/0', function (data) {
$('#container0').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'PARKING',
floating: true,
align: 'center',
},
tooltip: {
pointFormat: '{series.name}: </b>: Ksh. {point.y:,.0f}',
},
credits: false,
plotOptions: {
pie: {
size: '100%',
padding: 0,
allowPointSelect: true,
innerSize: '50%',
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -30,
x: 0,
y: 10,
format: '<b>{point.name}</b>: Ksh. {point.y:,.0f}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Parking',
colorByPoint: true,
data: data.data
}]
,
drilldown: {
series: data.drilldown
}
});
});
});
</script>
<div id="container0" class="col-md-3" style="margin:0px; height:300px"></div>
Related
Currently I am working on a feature layer of arcgis API for JavaScript. I want to show the graph with respect to my layers. Is it possible? If yes, then how can I add highchart on my map?
Here is the graph, which I want to show on my arcgis map:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Fiber Position in BTK'
},
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',
colorByPoint: true,
data: [{
name: 'Arial',
y: 61.41
}, {
name: 'Burried',
y: 11.84
}, {
name: 'Other',
y: 10.85
}]
}]
});
My chart was ok, I don't know what happened that the series name disappeared!
Maybe highcharts last updates need another options, or rtl causes problems.
My code: fiddle
What am I missing here?
$(function() {
$(document).ready(function() {
Highcharts.chart('user_info_46', {
chart: {
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: '',
useHTML: Highcharts.hasBidiBug,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
useHTML: true,
align: 'right',
rtl: true,
},
tooltip: {
useHTML: true,
align: 'right',
},
credits: {
enabled: false
},
series: [{
name: 'تعداد',
colorByPoint: true,
data: [{
name: 'آقا',
y: 7,
color: 'cornsilk'
}, {
name: 'خانم',
y: 2,
color: 'green'
}]
}]
});
});
});
With highcharts, I am seeing an overlapping strange behaviour with stacked columns and "percent". You can see it here http://jsfiddle.net/nqjpkc05/, the code is below.
How could I fix it without changing the data structure?
the html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
And the js
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category',
},
yAxis: {
// min: 0,
//minRange:1,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
grouping: true,
stacking: 'percent',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [{info:'P1',name:0,x:0,y:27},{info:'P2',name:0,x:0,y:8},{info:'P3',name:0,x:0,y:3}]
}, {
name: 'Jane',
data: [{info:'P1',name:1,x:1,y:35},{info:'P2',name:1,x:1,y:6},{info:'P3',name:1,x:1,y:0}]
}, {
name: 'Joe',
data: [{info:'P1',name:2,x:2,y:12},{info:'P2',name:2,x:2,y:5},{info:'P3',name:2,x:2,y:18}]
}]
});
You can move the stack labels on top of the column on load/redraw event - the position can be obtain from point.shapeArgs property.
function positionStackLabels() {
const stacks = this.yAxis[0].stacks.column;
Object.keys(stacks).forEach(s => {
const series = this.series[s];
const topPoint = series.data[0];
stacks[s].label.attr({
y: topPoint.shapeArgs.y - 5
});
});
}
Set events:
chart: {
type: 'column',
events: {
load: positionStackLabels,
redraw: positionStackLabels
}
},
Live example and output
http://jsfiddle.net/mkfn5w15/
I am using Highcharts pie chart and I would like to have an inner circle in pie chart. However the option to create a inner circle is not available in Highcharts.
I want to create inner circle in my chart as shown in this picture:
Below is my code. I am using highcharts-ng.js.
var budget = 100;
var sectionVal = 56.33;
$scope.highchartsNGPie = {
options: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
enabled: false,
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '98%',
innerRadius: '88%',
backgroundColor: Highcharts.Color('#808080').setOpacity(0.3).get(),
borderWidth: 0
}]
},
plotOptions: {
pie: {
allowPointSelect: false, //to stop animation of section
cursor: 'default',
borderWidth: 0,
showInLegend: false
},
series: {
animation: false,
}
},
},
series: [{
name: 'spent',
colorByPoint: true,
states: {
hover: {
enabled: false
}
},
data: [{
name: 'Spent',
y: sectionVal,
color: '#50B432',
tooltipDisabled: false,
dataLabels: {
style: {
color: 'black'
},
enabled: true,
formatter: function () {
//return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
return this.point.y + "%";
}
},
}, {
y: budget - sectionVal,
sliced: true,
selected: true,
color: '#ffffff',
tooltipDisabled: true,
dataLabels: {
enabled: false
},
}]
}],
title: {
text: 'Your Budget for September',
align: 'top'
},
loading: false
}
<div highchart id="chart1" config="highchartsNGPie"></div>
You can use it using size and innerSize options.
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
innerSize: '50%',
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
I am using highcharts pie chart and needs to change the tooltip position
to where the mouse is on while it's over the chart.
Currently I tried to change it's position but it's not working.
Here is how i tried to create and use the chart:
chartObj = new Highcharts.Chart({
chart: {
renderTo: container,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
animation: false,
backgroundColor: '#e4e6e1',
height: 300
},
colors: colors,
title: {
text: title
},
tooltip: {
positioner: function (boxWidth, boxHeight, point) {
return { x: point.plotX + this.chart.plotLeft, y: point.plotY + this.chart.plotTop };
},
pointFormat: '<b>{point.percentage}%</b>',
percentageDecimals: 1,
style: {
color: '#333333',
fontSize: '12px',
padding: '8px',
opacity: 1
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: width < 1500 ? false : true,
color:'#000000',
useHTML: true,
formatter: function () { return this.percentage.toFixed(2) + "%"; },
connectorWidth: 0,
distance: 5
},
showInLegend: true,
color: '#000000',
connectorColor: '#000000',
point: {
events: {
legendItemClick: function () {
return false;
}
}
},
},
},
series: [{ type: 'pie',
name: title,
visible: chart_visible,
data: data,
}],
credits: {
enabled: false
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0,
floating: false,
shadow: true
},
exporting: {
enabled: false
}
});
chartObj.series[0].setData(data);
return chartObj;
Unfortunately point.x and point.y are always the same for pie slice - they are not mouse position.
Possible workaroud is to use points.event.mouseOver and mouseOut and create your own tooltip (display some absolute with values from that event).