buttonStyle: Object

buttonStyle object lets you customize the style of Range Buttons in StockChart.

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeSelector: {
   buttonStyle: {
     backgroundColor: "grey",
     .
     .
   },
   .
   .
 },
 .
 .
});
stockChart.render();

Simple Button-Style Attributes

Applies To Attribute Type Default Options/Examples Remarks
buttonStyle backgroundColor String “white” “blue”, “#a0beec”, …
–
buttonStyle backgroundColorOnHover String “#41a5f5” (varies based on themes) “grey”, “#2196f3”, …
–
buttonStyle backgroundColorOnSelect String “#008eff” “darkSlateBlue”, “#eaeaea”, …
–
buttonStyle borderColor String “#2196f3” (varies based on themes) “Crimson”, “#41a5f5”, …
–
buttonStyle borderThickness Number 1 2, 4, …
–
buttonStyle labelFontColor String “grey” “red”, “#FAC003”, …
–
buttonStyle labelFontColorOnHover String “grey” “yellow”, “#FAC003”, …
–
buttonStyle labelFontSize Number Auto Calculated based on Stockchart Size 14, 16, …
–
buttonStyle labelFontStyle String “normal” “normal”, “italic”, “oblique”
–
buttonStyle labelFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “calibri”, “tahoma”, “verdana”, …
–
buttonStyle labelFontWeight String “normal” “lighter”, “normal”, “bold”, “bolder”
–
buttonStyle labelTextAlign String “center” “left”, “center”, “right”
–
buttonStyle width Number Automatically Calculated based on the Range Selector’s width 8, 10, 11, …
–
buttonStyle maxWidth Number Automatically Calculated based on the Range Selector’s width 4, 8, 16, …
–
buttonStyle padding Number { left: 5, right: 5, top: 2, bottom: 2 } { left: 2, right: 2, top: 2, bottom: 2 }, 2 , 3, …
–
buttonStyle spacing Number 0 1, 3, 4, …
–
buttonStyle cursor String “pointer” “pointer”, “move”, “crosshair”
–

Below example shows how to customize the background and border style of Range Buttons.

Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question