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
Related
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/
I'm just starting to play around with highcharts. I've found that when setting the color attribute it doesn't actually set that specific hex color - rather it only displays that exact hex color when you hover over the chart and it highlights. Highcharts seems to be "auto-dimming" the color so that when you hover over it it highlights and displays the specific hex color you list when creating the chart.
Is there a way to set the actual color that appears? It'd be nice to just be able to specific which hex color should appear initially and which hex color displays when it's highlighted, rather than it auto-dimming the color and highlighting to the hex color you specify:
$('#ageChart').highcharts({
chart: {
marginRight: 50,
marginTop: 0,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '',
style: {
fontSize: 10
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
pie: {
size: 300,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Age Breakdown',
data: [
{
name: "14-17",
y: fourteenToSeventeen,
color: "#E0DBBA"
},
{
name: "18-24",
y: eighteenToTwentyFour,
color: "#8C8C8B"
},
{
name: "25-34",
y: twentyFiveToThirtyFour,
color: "#BEE7E8"
},
{
name: "35-44",
y: thirtyFiveToFourtyFour,
color: "#217C7E"
},
{
name: "45-54",
y: fourtyFiveToFiftyFour,
color: "#687D68"
},
{
name: "55+",
y: fiftyFivePlus,
color: "#634357"
}
]
}]
})
The colors are actually being displayed correctly. But on hover state, the colors get "brightened" by Highcharts.
This behavior can be turned off by specifying the brightness factor to 0 like so:
$('#container').highcharts({
..
..
series: [{
type: 'pie',
name: 'Age Breakdown',
//add this section
states: {
hover: {
brightness: 0
}
},
data: [
..
..
]
}]
})
I drew a pie chart with highcharts, but in 3D mode my labels are separated from the chart.
You can see this jsfiddle.
If you change x and y values from dataLabels and run the example, you get the same result. The labels aren´t moved. Why? Do I need to define any parameter? With normal mode It works, but with 3D mode....BREAK!!
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title : {
text : 'Test'
},
tooltip : {
pointFormat: 'Value: <b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
depth: 35,
cursor: 'pointer',
dataLabels: {
enabled: true,
align: 'left',
format: '{point.name}',
connectorWidth: 5,
x:100,
y:300
}
}
},
series: [{
name: 'Test - Levels',
data: [
['Some Text Level 1', 74.25],
['Some Text Level 2', 17.82],
['Some Text Level 3', 7.92]
]
}]
});
});
UPDATED:
Bug found in HighCharts v4.0.1
BUG FIXED in HIGHCHARTS v4.0.3
Unforuantely it is known bug, reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/3082
Please stay on track with the github thread, until publish a fix.
You cannot fix the label position.
Try it:
pie: {
allowPointSelect: true,
depth: 35,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}',
connectorWidth: 5
}
}
http://jsfiddle.net/8cK3M/8/
I'd like to use a background image for each of my pie chart's slices. Is this possible in High Charts? I can't find an option to specify a background image for each slice. Here's a simple fiddle I put together: http://jsfiddle.net/3KyeL/ (just putting this here in case it makes life easier for someone who knows what to do):
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
title: {
align: 'center',
text: 'The Foo Bar',
style: {
color: '#9EA7B6'
},
verticalAlign: 'bottom',
y: 15 // TODO: compute this
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
distance: -100,
enabled: true,
color: '#FFFFFF',
format: '<strong>{point.name}</strong>: {point.percentage:.1f} %'
},
center: ['50%', '50%']
}
},
series: [{
data: [{
name: 'Foo',
y: 25
}, {
name: 'Bar',
y: 50
}, {
name: 'Foobar',
y: 25
}],
type: 'pie'
}]
});
});
Try to use pattern plugin: http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill
For example: http://jsfiddle.net/kVwGn/
<script src="https://rawgithub.com/highslide-software/pattern-fill/master/pattern-fill.js"></script>
...
series: [{
type: 'pie',
data: [{
y: 35,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
width: 6,
height: 6
}
}, {
y: 15,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
}]
My code is as follows :
var options = {
chart: {
type: 'column',
events: {
click: $scope.goToPath(link)
}
},
title: {
text: ""
},
xAxis: {
categories: ['You', 'Average', 'Top Quartile'],
labels: {
style: {
fontSize: '14px',
color: 'grey'
}
}
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
column: {
colorByPoint: true,
dataLabels: {
enabled: true,
color: '#000000',
style: {
fontWeight: 'bold'
},
formatter: $scope.getBarValues()
}
}
},
series: [{
showInLegend: true,
name: 'Planning Sites',
data: metric1["chart_numbers"],
colors: ['#3399CC', '#CCCC33', '#686868']
}, {
showInLegend: true,
name: 'Build Out And Implementation',
data: metric2["chart_numbers"],
colors: ['#99CBE5', '#E4E599', '#BFBFBF']
}
]
}
Here, I want to customize the legend shown so that it does not use the colors specified in the colors array of each of the series element. How can I do that?
I want the legend as follows :
Black color - Planning
Grey color - Build Out
Here is the jsFiddle : http://jsfiddle.net/Kc55H/
For each series you can set also color, see: http://jsfiddle.net/Kc55H/1/