Thank you, your answer was helpful, I also solved background color issue by using
negativeBackground option, I have a couple more questions:
1) I need to add horizontal lines along the entire chart. Below judging by the code, they should be present, but also as you can see from the screenshots above they are not displayed.
2) Also need to round the top corners of the columns, preferably without using third-party packages.
I found a pretty simple solution, we need to add the
Code: Select all
'clip-path' style: 'inset(0% 0% -2px 0% round 3px)'
CSS for each column, but how to do it right ?
Code: Select all
let options = {
chart: {
type: 'column',
renderTo: targetElementId,
negativeBackground: '#fff',
events: {
redraw: function (event) {
if (event.target.userOptions.cfxAxisUpdate) {
event.target.userOptions.cfxAxisUpdate = false;
return;
}
event.target.userOptions.cfxAxisUpdate = true;
event.target.userOptions.labelsUpdate = false;
ChartUtils.updateTickPositions(event.target, 'cashflow', event.target.userOptions.selectedDateRange);
}
}
},
title: {
text: null
},
xstep: 1,
labelRenderType: ChartUtils.labelRenderType.monYYYY3,
cfxAxisUpdate: false,
labelsUpdate: false,
chartName: 'cashflow',
xAxis: {
crosshair: true,
tickPositions: ticks,
labels: {
style: {
fontFamily: 'Source Sans Pro',
'color': ChartUtils.chartConfig.labelColor,
'font-size': '12px'
},
autoRotation: false,
align: 'center',
formatter: ChartUtils.generalLabelFormatter
},
gridLineWidth: 1,
lineWidth: 1,
lineColor: ChartUtils.chartConfig.lineColor,
gridLineColor: ChartUtils.chartConfig.gridLineColor,
tickWidth: 0,
max: data.categories.length - 1,
categories: data.categories
},
yAxis: {
title: false,
lineWidth: 1,
lineColor: ChartUtils.chartConfig.lineColor,
gridLineColor: ChartUtils.chartConfig.gridLineColor,
gridLineWidth: 1,
min: yMin,
labels: {
formatter: function () {
return ChartUtils.GetValueWithCurrency(this.value / 1000, planCurrencyId, planCurrencyPosition) + 'k';
},
style: {
fontFamily: 'Source Sans Pro',
'color': ChartUtils.chartConfig.labelColor,
'font-size': '12px'
}
}
},
plotOptions: {
column: {
borderWidth: 0,
maxPointWidth: 40,
borderTopRadius: 0
},
area: {
negativeColor: "#fff"
},
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
}
}
},
events: {
mouseOver: function(event) {
this.update({
marker: {
enabled: true
}
});
},
mouseOut: function(event) {
this.update({
marker: {
enabled: false
}
});
}
},
// Make the circles that appear on the cash/cash actuals line only appear on hover
// stickyTracking: false
}
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
legend: {
itemStyle: ChartUtils.chartConfig.legendTextStyle,
itemHoverStyle: ChartUtils.chartConfig.hoverLegendTextStyle,
},
series: data.series,
selectedDateRange: selectedDateRange
};
chart = Highcharts.chart(options);
chart.redraw(true);