style: {
color: "contrast"
}
does not change the color of the datalabels on my piechart. If the slice is black, the text is black too. And ofc I want it to be white.
Here is the config code that i am working with:
Code: Select all
export class HighChart_Pie extends Component {
constructor(props){
super(props)
this.state = {
config: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
styledMode: false
},
exporting: {
enabled: false
},
title: {
text: "",
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
className: "HC_legend",
itemMarginTop: 10,
itemStyle: {
fontSize: "1.4em",
padding: "20px",
overflow: "scroll"
},
maxHeight: 200,
},
plotOptions: {
pie: {
innerSize: ["50%", "75%"],
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
format: "{point.percentage:.1f}%",
enabled: true,
distance: -35,
style: {
textOutline: "none",
fontSize: "1.2em",
textShadow: false,
color: "contrast",
}
},
size: 280,
showInLegend: true,
colors: [
"#cfd7e2",
"#20bc9d",
"#7d8ba0",
"#1e283c",
"#9fafc9",
"#8b61b8"
],
}
},
series: [{
data: [],
}],
drilldown: {
series: []
}
}
}
}
componentDidUpdate(prevProps){
if(this.props.series !== prevProps.series){
const series = this.props.series
const brand = this.props.brand
const drilldown = this.props.children
console.log(drilldown)
const config = {
...this.state.config,
series: [{
name: brand,
data: series
}],
drilldown: drilldown,
}
this.setState({config: config})
}
}
render() {
console.log(this.state.config)
return (
<div id="pieChartMainContainer">
<h4 id="pieTitle" className="VisualTitle">{this.props.title}</h4>
<div id="pieContainer">
<ReactHighcharts highcharts={Highcharts} options={this.state.config} immutable={true} />
</div>
</div>
)
}
}
export default HighChart_Pie
I've been looking around everywhere and cant find anyone else that has had this issue it seems. As far as I can see, it should be working!
Hope anyone can help me look in the right place for a bug/misstake I have done somewhere that could affect this.
Thanks alot!
//
