Slider is an element in Navigator which allows you to select a range of values to be shown in viewport of charts. Slider comprises of handle, mask and outline.
var stockChart = new CanvasJS.StockChart("container",
{
.
.
navigator: {
slider: {
maskColor: "#a0beec"
.
},
.
.
},
.
.
});
stockChart.render();
| Applies To | Attribute | Type | Default | Options/Examples |
|---|---|---|---|---|
| slider | maskColor | String | “#d9e8f9” | “rgb(100,149,237)”, “#beebe9”, … |
| slider | maskOpacity | Number | 0.6 | 0.4, 0.5, … |
| slider | maskInverted | Boolean | false | true, false |
| slider | handleColor | String | “#EFEFEF” | “rgb(105,105,105)”, “#271b1b”, … |
| slider | handleBorderColor | String | “#3A3A3A” | “red”, “yellow” ,”#FF0000″, … |
| slider | handleBorderThickness | Number | 1 | 1, 2, 3, … |
| slider | handleWidth | Number | Automatically Calculated based on the navigator width | 10, 20, … |
| slider | handleHeight | Number | Automatically Calculated based on the navigator height | 30, 40, … |
| slider | minimum | Number / Date / Timestamp | Automatically Calculated based on the data | new Date(2018, 03, 12), 120, … |
| slider | maximum | Number / Date / Timestamp | Automatically Calculated based on the data | new Date(2019, 02,03), 250, … |
| slider | outlineColor | String | “#666666” | #dedede”, “black” |
| slider | outlineThickness | Number | 1 | 1, 2, … |
| slider | outlineInverted | Boolean | false | true, false |
Below is an example which shows how to change the color of mask.
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