everything is in the title, I really don't know how I can change the legend's size of my pie.
The code to render it is:
<script type="text/javascript">
$(function () {
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Title aligned left',
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
enableMouseTracking: false,
shadow: false,
animation: false,
allowPointSelect: true,
cursor: 'pointer',
verticalAlign: String,
dataLabels: {
enabled: true,
color: "#2B0057",
connectorColor: '#2B0057',
}
}
},
});
Does anyone know Highcharts and have a solution ? Thanks
The overall "size" of the legend is a combination of many factors (itemDistance, margins, itemMargins, explicit width etc..).
I'm guessing what you really care about though is the text size. Use legend.itemStyle for that:
legend: {
itemStyle: {
fontSize: '20pt'
}
},
Related
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'm using highchart in my web site. I wanna use thousand seperator in tooltip.
Here's the code:
divChart.highcharts({
lang: {
thousandsSep: ','
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<div style="direction:rtl; text-align:center; font-size:16px;">{point.key}</div><table >',
pointFormat: '<tr><td style="text-align: center;color:{series.color};width:100px;"><b style="margin:4px;">{point.y:,.0f}</b></td></tr>',
footerFormat: '</table>'
},
series: temp
});
But it's not working.
And also I wanna display pie chart labels in rtl direction.
Thanks for answering.
You can use a tooltip formatter and inside use a Highcharts.numberFormat
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
return '<div style="direction:rtl; text-align:center; font-size:16px;">'+this.key+'</div><table><tr><td style="text-align: center;color:'+this.series.color+';width:100px;"><b style="margin:4px;">'+Highcharts.numberFormat(this.y,0,'.',',')+'</b></td></tr></table>';
}
},
Example:
- http://jsfiddle.net/bd1hvj1y/
I am fairly new to Highcharts. I have a pie chart that is being rendered fine with dynamic data (JSON String) . But I want to customize certain slices to be Sliced: true and Selected: True. I am not sure how to do it. Please find my code as below,
<div id="container_${page_id}" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>
var series = [];
var total = 0;
$.each(data, function(index, value) {
series.push([value.statisticData+'_'+value.sizes,parseInt(value.sizes)]);
console.log("statisticData",value.statisticData);
console.log("value.sizes",value.sizes);
total += parseInt(value.count);
});
var chartSessionStatus = new Highcharts.Chart({
chart: {
renderTo: $("#container_"+testSessionPageId).get(0),
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: [{
text: 'Statistics',
}]
}}
},
tooltip: {
formatter: function() {
return this.point.name.split('_')[0] + ': <b>'+this.y+'</b>';
}
},
title: {
text: '<h4 style="font-style: bold">Tenant Statistics</h4>'
},
legend: {
labelFormatter: function() {
return this.name.split('_')[0] + ' (' + this.y+')';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: 0,
useHTML: true,
formatter: function() {
if( this.y > 0)
return '<b>'+this.point.name.split('_')[0] +'('+ this.y +')</b>';
}
},
showInLegend: true,
size: 150
}
},
series: [{
type: 'pie',
name: 'Tenant Statistics',
data: series
}]
});
});
Main point of concern, in the series , I have the option for data as "data : series" but I would like to customize certain slices in this series. But since the data is dynamic I am not sure how to use only certain parts of the json string
The Json that i receive is in the following format :
[{"statisticData":"Tests Created","sizes":"3"},{"statisticData":"Students","sizes":"2"},{"statisticData":"Users","sizes":"7"},{"statisticData":"Schools","sizes":"10"}]
Any Help is greatly appreciated !!! Thanks in advance.
After getting json, you can parse it / add slice parameter and then use in highcharts. So instead of pushing :series.push([value.statisticData+'_'+value.sizes,parseInt(value.sizes)]);
you can push something like:
series.push({
name: value.statisticData+'_'+value.sizes,
y: parseInt(value.sizes),
sliced: true,
selected: true
});
I've encounted a problem when updating data of pie chart by clicking on a button - the legend and title overlap pie chart. But what's interesting is that when I resize the browser, for example, maximize the browser, position of title and legend go back normal.
Problem example is shown at http://jsfiddle.net/HmmeX/3/.
Data is updated by
$('button').click(function() {
// var chart = $('#container').highcharts();
chart.setTitle({
text: 'Browser market shares at a specific website, 2010'
});
chart.series[0].setData(adata, true);/*update({
data: adata});*/
});
That looks like a bug to me. You can work around it by adding size : 300 to your pie options.
chart = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
verticalAlign: 'bottom'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
size:300
}
},
series: [{
name: 'Browser share',
data: []
}]
});
http://jsfiddle.net/xNmLd/
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).