Apply style to widget buttons

We can add buttons to a widget for many purposes. Here are some examples we already posted:

Switchable Measure Buttons

Button to Show/Hide value labels

Button to change widget type

In above posts, we added buttons with default style. But we can apply styles to button by using below script.

Steps:

1. Create a Line/Column/Bar/Area/Pie chart

2. Add below script to widget. This script is to add a sample button with style

3. Save the script and refresh widget

widget.on('processresult', function(se, ev){	
	ev.result.chart.marginTop= 60
});

var normalState = {
                     fill: '#f44336',
                     stroke: '#f44336',
                     r: 3,
                     style: {
                              color: '#ffffff',
                              borderWidth  : 0
                             }
                   },
hoverState = {
                    fill: '#f05146',
                    stroke: '#f05146',
                    r: 3,
                    style: {
                              color: '#ffffff',
                              borderWidth  : 0
                           }
                  }, 
pressedState = {
                        fill: '#284dc7',
                        stroke: '#284dc7',
                        r: 3,
                        style: {
                                  color: '#ffffff',
                                  borderWidth  : 0
                               }
                    },
disabledState = {
                        fill: '#284dc7',
                        stroke: '#284dc7',
                        r: 5,
                        style: {
                                 color: '#ffffff',
                                 borderWidth  : 0
                               }
                    },
callback = function () {
                        
                        }

widget.on("domready", function(w){
		
	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc

	
	chart.renderer.button('Sample Button', 10, 10,
				callback,
				normalState,
				hoverState,
				pressedState,
				disabledState)
			.attr({
				zIndex : 10,
				height: 15,
				width: 150,
				'text-align': 'center'
			})
			.on('click', function() {						
				//script to perform some action
			})
			.add();

	
});