cancel
Showing results for 
Search instead for 
Did you mean: 

Font color change

zohebakber
9 - Travel Pro
9 - Travel Pro

Hi team, 

I want to change the text styling of the widget in bar and scatter chart.
I am using the below script. It works fine for me however, I am unable to change the color of the font here.

Script:

widget.on('ready', function(se, ev){

_.each($("text" , element), function(label){ //selects each text element in the widget (the "element" object represents the widget"), and runs the function, passing the selected text element as the "label" argument to the function. So the "label" argument represents the "text" element.
label.style="font-size: 13px; font-family: sans-serif; color:#000103; font-weight: bold"; //modifies the style property of the label (which is the text element in the widget). font-family can be "Arial" or "sans-serif" for example. font-weight can be "Bold" or "Normal".

});
})



zohebakber_0-1674633330575.png

cc: @harikm007 

1 ACCEPTED SOLUTION

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @zohebakber ,

Try this script:

 

widget.on('ready', function(se, ev){
	_.each($("text", element), function(label){ 
	label.style="font-size: 13px; font-family: sans-serif; font-weight: bold";

	})
	$('.sis-scope .slf-widget-text-primary').css('fill', 'blue')//to change text color
})

 

If you want to change color of value labels only, use this:

 

widget.on('processresult', function(se, ev){

	$.each(ev.result.series, function(seriesIndex, seriesValue){
		
			seriesValue.dataLabels = {
										style: {
											
											color:'red'
										}
			}

	})
	ev.result.yAxis[0].stackLabels.style.color = 'green'
})

Refer: https://www.binextlevel.com/post/format-data-labels

 

-Hari

View solution in original post

1 REPLY 1

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @zohebakber ,

Try this script:

 

widget.on('ready', function(se, ev){
	_.each($("text", element), function(label){ 
	label.style="font-size: 13px; font-family: sans-serif; font-weight: bold";

	})
	$('.sis-scope .slf-widget-text-primary').css('fill', 'blue')//to change text color
})

 

If you want to change color of value labels only, use this:

 

widget.on('processresult', function(se, ev){

	$.each(ev.result.series, function(seriesIndex, seriesValue){
		
			seriesValue.dataLabels = {
										style: {
											
											color:'red'
										}
			}

	})
	ev.result.yAxis[0].stackLabels.style.color = 'green'
})

Refer: https://www.binextlevel.com/post/format-data-labels

 

-Hari