Hello, I want to apply 5 different colors to 5 datalabels of respective columns in Columnchart. Right now, I am able to apply one color ie orange only. Please help me out. Thank you.
<html>
<head>
<title>Column chart-desktop-premier</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<style type="text/css">
body{
font-family: 'Source Sans Pro', sans-serif;
}
</style>
</head>
<body>
<div id = "container" style = "width: 1700px; height: 500px; margin: 0 auto"></div>
<script language = "JavaScript">
const color = {
Online: '#974a57',
Chip_PIN: '#de6f7e',
Contactless: '#e38454',
Transfer:'#8c512b',
Cash_out:'#5b9cb9'
}
$(document).ready(function() {
var chart = {
type: 'column',
showAxes : true,
borderWidth: 0,
marginTop: 7,
marginRight: 7,
marginBottom: 7,
marginLeft: 7,
style:{
fontFamily:'Sans Serif'
},
backgroundColor: '#FFFFFF',
height: 198,
width: 365
};
var legend={ enabled:false };
var title = { text: '' };
var subtitle = { text: '' };
var xAxis = {
categories: ['Online', 'Chip_PIN', 'Contactless', 'Transfer', 'Cash_out'],
tickPixelInterval:50,
min: 0,
max: 4,
text:null,
visible:true,
offset:0,
linecolor:'transparent',
labels: {
y:7,
style:
{
fontSize:'6px',
fontFamily:'Sans Serif'
},
align:'center',
formatter () {
return `<span style="color: ${color[this.value]}">${this.value}</span>`
}
}
};
var yAxis = {
min: 0,
max:100,
gridLineColor: 'transparent',
lineColor: 'Gray',
lineWidth: 1,
minorGridLineWidth: 0,
minorTickInterval: 'auto',
minorTickColor: 'Gray',
minorTickWidth: 1,
minorTickLength:5,
tickInterval:50,
tickLength:100,
stackLabels: {
style: {
color: ''
},
enabled: true,
verticalAlign: 'top'
},
labels: {
enabled: false,
overflow: 'justify'
},
title: { text: '' }
};
var colors =[
'#974a57',
'#de6f7e',
'#e38454',
'#8c512b',
'#5b9cb9'
];
var tooltip = { pointFormat: '<span style="color:{series.color}">{series.name}</span>: {point.y} {point.percentage:.0f}%<br/>' };
var plotOptions = {
series: {
pointPadding: 0,
groupPadding: 0.03,
},
column: {
colorByPoint: true,
borderWidth: 0,
dataLabels: {
format: '{point.y:.f}%',
padding:16,
enabled: true,
style: {
fontSize: '16px',
color: 'Orange',
fontFamily:'Sans Serif',
textOutline: '1px contrast'
},
},
series: {
pointWidth: 66,
minPointLength: 50,
colors :[
'#974a57',
'#de6f7e',
'#e38454',
'#8c512b',
'#5b9cb9'
]
}
}
};
var credits = { enabled: false };
var series= [
{
name: 'HSBC',
data: [{y:50}, {y:10},{y:30}, {y:9}, {y:1}],
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.legend=legend;
json.yAxis = yAxis;
json.colors=colors;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
</body>
</html>
What I have tried:
I applied only one color to all the datalabels. But I am stucked with this.