I'm trying to use the new responsive options in Highcharts to hide data labels on a pie chart when the charts width gets below 400px.
My responsive code is as follows:
responsive: {
rules: [{
condition: {
maxWidth: 300
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>:{point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
}
}]
}
and is meant to set the dataLabels enabled to false below 400px. I've attempted this here http://jsfiddle.net/chv4ux0z/ but to no avail, does anyone know what I'm doing wrong, I've followed the Highcharts examples but just cant seem to get this right?!
I think that you should be able to add your plotOptions inside responsive.rules.chartOptions object. Then your chart should work correctly:
http://api.highcharts.com/highcharts/responsive.rules.chartOptions
responsive: {
rules: [{
condition: {
maxWidth: 400
},
chartOptions: {
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
}
}
}]
}
Live example: http://jsfiddle.net/chv4ux0z/2/
Related
I have made a pie chart using highcharts and making a chart with the following options
chart: {
type: 'pie',
},
and I added the below options to change the width of the text which forces each word to be on a different line
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} {point.y}',
style: {
width: 50,
fontSize: '20px',
},
}
}
I try to change the color of the label by adding a color property to the style, but it wont change the color. How would I change the color, as well as the text underline?
This is the label that I am talking about that is on my highcharts pie chart,
Thank you, also a bonus question would be, is there a way that I could make a giant white circle in the middle of the pie chart? sort of like making a hole in a donut?
The label color is configured by dataLabels.color:
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: 'green', 👈
}
}
}
demo 1
or dataLabels.style.color:
plotOptions: {
pie: {
dataLabels: {
enabled: true,
style: {
color: 'green', 👈
}
}
}
}
demo 2
For a drilldown pie chart, the label color is configured by plotOptions.series.dataLabels.color and series.data[].dataLabels.color (where each data point can have its own color config):
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
color: 'green', 👈
}
}
},
series: [
{
name: "Browsers",
colorByPoint: true,
data: [
{
name: "Chrome",
y: 62.74,
drilldown: "Chrome",
dataLabels: {
color: 'green', 👈
}
},
{
name: "Firefox",
y: 10.57,
drilldown: "Firefox",
dataLabels: {
color: 'green', 👈
}
},
//...
]
}
]
demo 3
drilldown.activeDataLabelStyle.color can also be used:
drilldown: {
activeDataLabelStyle: {
color: 'green' 👈
},
}
demo 4
Click to see the image I am facing an overlap problem regarding my 3d funnel using highcharts. I have also attached an image showing the problem. hope it might help you to debug
I've already tried the api reference as per the highcharts documantation
function sales_funnel(key_val, response) {
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Highcharts.chart('funnel_container', {
chart: {
type: 'funnel3d',
options3d: {
enabled: true,
alpha: 10,
depth: 50,
viewDistance: 50
}
},
title: {
text: 'Sales Funnel'
},
plotOptions: {
funnel3d: {
label: {
enabled: true,
connectorAllowed: true,
connectorNeighbourDistance: 30
},
},
series: {
dataLabels: {
enabled: true,
format: '{point.name} ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
},
neckWidth: '30%',
neckHeight: '25%',
width: '80%',
height: '80%'
}
},
series: [{
name: response[1],
data: key_val
}]
});
}[enter image description here][1]
I need to get a chart like this and I have no idea how to get it.
I've tried with custom tooltips but I need show them all of them at the same time. I've tryed as well with chartjs-plugin-datalabels but the labels are inside the canvas and they appear cut.
Do I need to create a html tooltip for every data?
Any ideas?
Updated:
Here is my code:
options: {
responsive: true,
maintainAspectRatio: true,
legend: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
cutoutPercentage: 60,
circumference: 2 * Math.PI,
showAllTooltips: true,
tooltips: {
enabled: false
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 50,
borderWidth: 1,
anchor: 'end',
align: 'end',
color: 'white',
padding: 10,
font: {
weight: 'normal',
size: '10'
},
formatter: function(value, context) {
var percentageNum = context.chart.data.datasets[0].data[context.dataIndex]
return percentageNum + '\n %';
}
}
}
}
and this is what I get:
Pie Chart in highcharts, How to disable the line pointing outside pie-chart
pie chart example
Highcharts.chart('container', {
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: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
<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; max-width: 600px; margin: 0 auto"></div>
fiddle
By looking at the Highcharts API you can find the answer to your question, specifically you want plotOptions.pie.dataLabels.connectorWidth.
There is even a pre made example there for exactly what you are asking: jsfiddle example.
Where they have added connectorWidth: 0
plotOptions: {
pie: {
dataLabels: {
connectorWidth: 0
}
}
}
One of the option is to disable the label. check settings below:
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
Or in order to achieve no connectors use code below. distance:0 will solve the purpose
<pre>
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
distance:0,
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
I'm currently working with Highcharts columnrange and I need to add stack label on top of each column/each month in order to show Total Number of Hours our Store is being Opened.. But sadly, I've tried different ways and still no joy.
Here's the current jsfiddle that I have;
http://jsfiddle.net/rds_a/0mLa0yd5/2/
Here's the code;
$(function () {
$('#container').highcharts({
data: {
table: 'summary'
},
chart: {
type: 'columnrange'
},
colors: ['black', 'orange'],
title: {
text: 'Jackstone Store'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
columnrange: {
grouping: false,
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
}
});
});