buttonStyle object lets you customize the style of Range Buttons in StockChart.
var stockChart = new CanvasJS.StockChart("container",
{
.
.
rangeSelector: {
buttonStyle: {
backgroundColor: "grey",
.
.
},
.
.
},
.
.
});
stockChart.render();
| 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.
Also See:
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix