Forum Discussion

zohebakber's avatar
zohebakber
Cloud Apps
01-25-2023
Solved

Font color change

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".

});
})



cc: harikm007 

dashboards & reporting
  • harikm007's avatar
    harikm007
    01-25-2023

    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

1 Reply

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse
    01-25-2023

    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