Range Selector lets you control range of data to be shown in viewport of all charts. You can select a range by entering it manually in Inputfields or by selecting a pre-defined range through a Range Button.
var stockChart = new CanvasJS.StockChart("container",
{
.
.
rangeSelector: {
.
.
.
},
.
.
});
stockChart.render();
| Applies To | Attribute | Type | Default | Options/Examples |
|---|---|---|---|---|
| rangeSelector | enabled | Boolean | true | true, false |
| rangeSelector | width | Number | Automatically calculated based on StockChart width | 400, 800, … |
| rangeSelector | height | Number | Automatically calculated based on StockChart height | 50, 100, … |
| rangeSelector | verticalAlign | String | “top” | “top”, “bottom” |
| rangeSelector | label | String | “Range” | “Zoom”, “Range”, etc. |
| rangeSelector | selectedRangeButtonIndex | Number | none | 1, 2, … |
| Object | Attribute | Type | Default | Options |
|---|---|---|---|---|
| rangeSelector | buttonStyle | Object | – | – |
| rangeSelector | buttons | Object | – | – |
| rangeSelector | inputFields | Object | – | – |
var stockChart = new CanvasJS.StockChart("container",
{
.
.
rangeSelector: {
buttonStyle: {
backgroundColor: "#4040a1",
.
},
.
},
.
.
});
stockChart.render();
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