Code: Select all
const options = {
chart: { height: 275 },
legend: { verticalAlign: 'top' },
plotOptions: {
column: { stacking: 'normal', dataLabels: { enabled: true } },
line: { dataLabels: { enabled: false } },
},
series: [
{
dataLabels: { format: '${point.y:.3f}' },
tooltip: { valuePrefix: '$' },
color: '#46ae82',
data: [ ... ],
name: '< 30',
type: 'column',
yAxis: '0',
},
{
dataLabels: { format: '${point.y:.3f}' },
tooltip: { valuePrefix: '$' },
color: '#1f78b4',
data: [ ... ],
name: '30-60',
type: 'column',
yAxis: '0',
},
{
dataLabels: { format: '${point.y:.3f}' },
tooltip: { valuePrefix: '$' },
color: '#fdbf6f',
data: [ ... ],
name: '60-90',
type: 'column',
yAxis: '0',
},
{
dataLabels: { format: '${point.y:.3f}' },
tooltip: { valuePrefix: '$' },
color: '#ec605b',
data: [ ... ],
name: '90-180',
type: 'column',
yAxis: '0',
},
{
dataLabels: { format: '${point.y:.3f}' },
tooltip: { valuePrefix: '$' },
color: '#e62b24',
data: [ ... ],
name: '180+',
type: 'column',
yAxis: '0',
},
{
dataLabels: { format: '{point.y:.3f}%' },
tooltip: { valueSuffix: '%' },
data: [ ... ],
name: '90+',
type: 'line',
yAxis: '1',
},
],
title: { text: 'Claim AR Trend By Age Bucket' },
tooltip: { shared: true, xDateFormat: '%Y %B' },
xAxis: { type: 'datetime' },
yAxis: [
{
title: { text: '' },
labels: { format: '${value:.1f}' },
reversedStacks: false,
id: '0',
},
{
title: { text: '' },
labels: { format: '{value:.1f}%' },
id: '1',
opposite: true,
},
],
};