Navigator is generally used to show a preview of the entire range of data being shown in charts. It also contains Slider which allows you to select a range of values to be shown in viewport of charts.
var stockChart = new CanvasJS.StockChart("container",
{
.
.
navigator: {
.
.
height: 100,
.
.
},
.
.
});
stockChart.render();
| Applies To | Attribute | Type | Default | Options/Examples |
|---|---|---|---|---|
| navigator | enabled | Boolean | true | false, true |
| navigator | height | Number | Automatically Calculated based on the StockChart height | 300, 400, 500, … |
| navigator | width | Number | Automatically Calculated based on the Stock Chart width | 500, 600, 800, … |
| navigator | verticalAlign | String | “bottom” | “top”, “bottom” |
| navigator | backgroundColor | String | null | “blue”, “#0000FF”, “rgb(0,0,255)”, … |
| navigator | animationEnabled | Boolean | false | false, true |
| navigator | animationDuration | Number | 1200 | 500, 1000, 1500, … |
| navigator | dynamicUpdate | Boolean | true | false, true |
| Object | Attribute | Type | Default | Options/Examples |
|---|---|---|---|---|
| navigator | slider | Object | ||
| navigator | axisX | Object | ||
| navigator | axisY | Object | ||
| navigator | data | Object |
var stockChart = new CanvasJS.StockChart("container",
{
.
.
navigator: {
slider: {
minimum: new Date(2018, 04, 22),
maximum: new Date(2018, 06, 20)
},
.
.
},
.
.
});
stockChart.render();
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