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).
Related
Hi EveryOne I am using HighCharts library to plot charts , i want to achieve below pie chart i couldn't find proper example please help me on this.
You can enable sliced state for the blue point and use properties related with border:
series: [{
showInLegend: true,
allowPointSelect: true,
type: 'pie',
data: [{
y: 45,
color: 'black',
dataLabels: {
enabled: false
}
}, {
y: 55,
color: 'blue',
sliced: true,
borderWidth: 5,
borderColor: 'white',
dataLabels: {
format: '{point.y}%',
distance: -60,
style: {
fontSize: 24
}
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/gnqsuefw/
API Reference: https://api.highcharts.com/highcharts/series.pie.data.sliced
I created the extract pie for you here: https://jsfiddle.net/markwan/qm8xzr93/3/
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: "#f5f5f5",
backgroundColor: '#f5f5f5',
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
enabled: false
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemMarginBottom: 15,
x: 0,
y: 150
},
series: [{
name: 'Members',
colorByPoint: true,
data: [
{
name: 'Total Members: 1.000.000',
y: 450000,
color: "#393f4e",
borderWidth: 1,
borderColor: '#f5f5f5',
dataLabels: {
enabled: false,
}
},
{
name: 'Targeted Members: 550.000',
y: 550000,
sliced: true,
borderWidth: 15,
borderColor: 'white',
color: "#34b9d5",
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
distance: -70,
style: {
fontSize: 30
}
}
}]
}]
});
I've created a donut chart using vue-highcharts/highcharts, and am trying to append text on mouseover to the center of the donut. I've got it appending static text, however I'm trying to return the data from the point I hover over, to display that in the center, however I can't seem to find any relevant data from within the event object. Does anyone know how I might be able to access that data?
chartOptions: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
legend: {
align: 'right',
enabled: true,
layout: 'vertical',
verticalAlign: 'middle'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
center: ['50%', '50%'],
showInLegend: true,
events: {
mouseOver: (e) => {
const { chart } = this.$refs.highchartsRef;
const height = chart.chartHeight / 2;
const width = e.target.center[3];
console.log({ chart });
console.log({ e });
chart.renderer
.text('Top Test</br>Bottom Test', width, height, true)
.css({
color: '#4a4a4a',
fontSize: '16px',
fontWeight: 700
})
.addClass('highcharts-center-label text-center')
.add();
},
mouseOut: () => {
document.querySelector('.highcharts-center-label').remove();
}
}
}
},
series: [{
name: 'Categories',
colorByPoint: true,
size: '100%',
innerSize: '60%',
data: this.categories.map(category => {
return {
name: category.name,
y: calculateCategoryWeight(category)
};
})
}],
title: null,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
}
Use point.events and a basic function instead of the arrow one.
plotOptions: {
pie: {
point: {
events: {
mouseOver: function() {
var point = this,
series = point.series,
chart = series.chart;
console.log(point.y);
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/7oub1xzj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.pie.point.events
I have a series that I would like to be ignored in the percentage calculation of a pie chart but still be shown/hidden when the legend item is clicked. The series represents the total and should always be 100%. If I set visible to false for the series it is initially hidden in the chart and the legend item is greyed out. However, clicking the legend item shows the series with the calculated percentage. It seems like I need another series behind the values I would like to be calculated and displayed, that's always 100%, any ideas?
Thanks!
Chart Config
vm.installationResultsConfig = {
options: {
exporting: {
type: 'application/pdf',
filename: 'installation-results'
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
chart: {
backgroundColor: '#F9F9F9',
borderColor: '#eee',
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 440
},
title: {
text: 'Installation Results',
align: 'center',
verticalAlign: 'top'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
startAngle: 0,
endAngle: 360,
center: ['50%', '55%'],
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout: 'vertical',
x: -8,
y: 30,
labelFormatter: function () {
if(this.name === 'All Vehicles') {
this.percentage = 100;
}
return '<span>' + this.name + '</span><br />' +
'<span>' + this.dataLabels.count + '</span><br />' +
'<span>' + $filter('number')(this.percentage) + '%</span>';
},
useHTML: true,
itemMarginTop: 5,
itemMarginBottom: 5
}
},
series: [{
type: 'pie',
name: 'Installation Results',
innerSize: '70%',
data: [
{
name: 'All Vehicles', // should be ignored and alway render as 100%
y: chartData.allVehicles,
color: '#999999',
dataLabels: {
count: $filter('number')(chartData.allVehicles)
}
},
{
name: 'Successful',
y: chartData.successful,
color: '#50CF63',
dataLabels: {
count: $filter('number')(chartData.successful)
}
},
{
name: 'Failed',
y: chartData.failed,
color: '#F22F1D',
dataLabels: {
count: $filter('number')(chartData.failed)
}
},
{
name: 'Not Attempted',
y: chartData.notAttempted,
color: '#296499',
dataLabels: {
count: $filter('number')(chartData.notAttempted)
}
}
]
}]
};
The percentage property will affect all pie slices in series. In that situation, you can create custom percentage property, which will be calculated based only on visible slices that are not 'All Vehicles' slice. Take a look at the example below. Also, I think that the labelFormatter function is not the right place to make calculations but I only wanted to show you the idea.
Example:
http://jsfiddle.net/g1hw761h/
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>
I have a column chart combined with a line drawing across the chart.
When decreasing the width of the chart container to a value smaller than 357px the horizontal line is only drawn half way instead of the full width.
chart = new Highcharts.Chart({
chart: {
renderTo: 'chartcontainer',
defaultSeriesType: 'column',
borderRadius:0,
marginRight: 22,
marginBottom: 140
},
title: {
text: 'test norm',
align: 'left'
},
xAxis: [{
title: {
text: 'x',
style: {
}
},
categories: ['2008','2009','2010','2011','2012'],
labels: {
style: {
}
}
},
{ //secondary xAxis for range and norm values
gridLineWidth: 0,
labels:{
enabled:false
},
lineWidth:0,
tickWidth:0,
opposite: true,
minPadding:0,
maxPadding:0
}
],
yAxis: {
title: {
text: 'y',
style: {
}
},
labels: {
style: {
}
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom',
width:700,
borderRadius: 0,
shadow:false,
floating:true,
borderWidth: 0
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
borderRadius: 0,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: false,
style: {
font: 'bold 11px Arial, Verdana, sans-serif',
fontWeight: 'bold'
},
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>';
}
},
plotOptions: {
column: {
dataLabels: {
enabled: false
},
shadow: false
}
},
series: [{ name: 'A', shadow: false, data: [8,2,8,4,6] },{ name: 'B', shadow: false, data: [1,4,2,3,4] },{ name: 'C', shadow: false, data: [4,16,8,12,16] },{ name: 'E', shadow: false, data: [8,4,6,8,2] },{
type:'line',
name:'Norm',
data:[
{
y:10.000000,
x:0.000000,
dataLabels: {
enabled: false,
align: 'left',
formatter:function(){return 'Norm: ' + this.y;},
style: {fontWeight:'bold'}
},
},
{
y:10.000000,
x:1.000000,
dataLabels: {
enabled: true,
align: 'right',
formatter:function(){return 'Norm: ' + this.y;},
style: {fontWeight:'bold'}
},
}
],
color: '#01A1EB',
lineWidth:1,
dashStyle:'Solid',
shadow: {
opacity:0.1
},
enableMouseTracking:false,
marker:{enabled:false},
xAxis:1,
showInLegend: true
}]
});
See my jsfiddle example here:
The line fully drawn:
http://jsfiddle.net/ramon_ackermann/WwSbT/7/
The line only half way:
http://jsfiddle.net/ramon_ackermann/WwSbT/8/
Any ideas what might cause this?
Cheers.
Use Plotline on the y axis instead: http://jsfiddle.net/paranoir/WwSbT/9/
plotLines: [{
color: '#FF0000',
width: 1,
value: 10
}]
Plotline would be my preferred option as well.
If you need it to be a series for some reason, however, you can do it like this:
1) set your min x value for the line at -0.5, max x value at 4.5
2) set xAxis min at 0 and max at 4
3) forget about the secondary x axis
http://jsfiddle.net/jlbriggs/WwSbT/10/
for the x axis:
xAxis: [{
min:0,
max:4,
}]
and then in the data:
...
y:10.000000,
x:-0.5,
...
y:10.000000,
x:4.5,
The second x axis appears to be part of the problem. If you hide the norm series, and then reshow it, it fills the plot area properly.