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 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 it Yourself by Editing the Code below.



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