I want to apply different colors for different columns ,percent values should be displayed on top of respective columns and Help me how can I increase the each column width of Bar chart in this code…Please help me out with this.
const color = {
Online: ‘#800000’,
Chip_PIN: ‘#DB7093’,
Contactless: ‘#FF7F50′,
Transfer:’#008080′,
Cash_out:’#006400’
}
$(document).ready(function() {
var chart = {
type: ‘column’,
showAxes : true,
marginRight : 0,
marginLeft : 10,
};
var legend={ enabled:false };
var title = {
text: ”
};
var subtitle = {
text: ”
};
var xAxis = {
categories: [‘Online’, ‘Chip_PIN’, ‘Contactless’, ‘Transfer’, ‘Cash_out’],
min: 0,
max: 4,
text:null,
visible:true,
linecolor:’transparent’,
labels: {
align:’high’,
formatter () {
return `${this.value}`
}
}
};
var yAxis = {
min: 0,
max:150,
gridLineColor: ‘transparent’,
lineColor: ‘Gray’,
lineWidth: 1,
minorGridLineWidth: 0,
minorTickInterval: ‘auto’,
minorTickColor: ‘Gray’,
minorTickWidth: 1,
minorTickLength:5,
tickInterval:50,
opposite:false,
align:’left’,
//tickAmount:5,
stackLabels: {
style: {
color: ”
},
enabled: false,
verticalAlign: ‘top’,
},
labels: {
enabled: true,
overflow: ‘justify’
},
title: {
text: ”
}
};
var colors =[
‘#800000’,
‘#DB7093’,
‘#FF7F50’,
‘#008080’,
‘#006400’
]
var tooltip = {
pointFormat: ‘{series.name}: {point.y} ({point.percentage:.0f}%)
‘
};
var plotOptions = {
column: {
pointPadding:0,
minPointLength: 50,
stacking: ‘normal’,
dataLabels: {
format: ‘{point.y:.1f}%’,
enabled: true,
style: {
fontWeight: ‘bold’,
fontSize: ’20px’,
color: ‘Yellow’,
textOutline: ‘1px contrast’
}
},
series: {
colorByPoint: true,
borderWidth: 0
}
}
};
var credits = {
enabled: false
};
var series= [
{
name:’HSBC’,
data: [49.9,50,80,35,70],
}
];
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);
});