cartercjb
04-12-2022ETL
Arranging Layers of Chart Values Without Disrupting Format
Does anyone have suggestions on how to change the layers in which the values are plotted?
I have this chart where the data label shape for RUNNING 14-D AVG. is behind the Column:
I tried re-arranging the Values, which does fix the layering problem, but for some reason, it eliminates the line chart's data label shape:
Any suggestions? Here is the widget's script for formatting:
widget.on('processresult', function(e, args) {
var markerRadius = 18;
var markerColor = '#FF0000';
var markerHoverColor = '#C0C0C0';
var labelSize = '12px';
var labelColor = '#FFFFFF';
var lineStyle = 'shortdash';
var lineWidth = 1;
var chartS = args.result.series;
for(var s = 0; s < chartS.length; s++ ) {
var dd;
chartS[s].dashStyle = lineStyle;
chartS[s].lineWidth = lineWidth;
chartS[s].marker = {
symbol: 'circle'
}
for(var d = 0; d < chartS[s].data.length; d++) {
dd = chartS[s].data[d];
var dataLabelsTemplate = {
enabled : true,
y : (markerRadius /2),
style: {
color: labelColor,
textOutline: 'none',
fontSize : labelSize,
fontWeight : "bold"
}
};
dd.dataLabels = dataLabelsTemplate;
dd.marker.radius = markerRadius;
dd.marker.enabled = true;
dd.marker.fillColor = chartS[s].color;
dd.marker.states.hover.fillColor = chartS[s].color;
dd.marker.states.hover.radius = markerRadius;
dd.marker.states.hover.enabled = true;
}
}
});
//column chart
widget.on('processresult', function(se, ev){
var legend = ev.result.legend;
legend.itemStyle.fontWeight = 'bold';
legend.itemStyle.color = '#000000';
var seriesNames = ['Actual All Service'];
seriesNames.forEach(function(e,i,a){
var data = _.find(ev.result.series, function (ser) {return ser.name == e}).data
_.each(data, function(value){
value.dataLabels = {enabled:true,inside:true, style:{'fontSize':'12px','color':'#000000' ,'fontWeight':'bold'}, rotation:0, align:'center', verticalAlign:'top'}})}
)})
widget.on('render', function(se,ev){
//bold bottom and left
se.queryResult.xAxis.labels.style.fontWeight = 'bold';
se.queryResult.yAxis[0].labels.style.fontWeight = 'bold';
})
widget.on('ready', function(jx){
$('.highcharts-plot-band-label',element).css({'font-weight':'bold'})
})
widget.on('ready', ()=> {
$(element).parent().css('border-radius', '20px');
$(element).parent().parent().css('border-radius', '20px');
})