inputFields: Object

Inputfields lets you control the range of data to be shown in viewport of all charts by entering a range manually as text. This gives you finer control over the range.


Note
  • While entering values manually, format to be followed for Date values is “YYYY-MM-DD”
  • You can also integrate third party date picker tools (like jQuery UI) with inputFields to make it simpler.


var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeSelector: {
   inputFields: {
     startValue: new Date(2017, 06, 01)
   },
   .
 },
 .
 .
});
stockChart.render();


Simple Input-Fields Attributes

Applies To Attribute Type Default Options/Examples Remarks
inputFields enabled Boolean true true, false
inputFields startValue Number/Date/Timestamp Auto Calculated based on data 20, 100, new Date(2017, 06, 01), …
inputFields endValue Number/Date/Timestamp Auto Calculated based on data 400, 700, new Date(2017, 09, 04), …
inputFields valueType String Auto Calculated based on data “number”, “dateTime”
inputFields valueFormatString String null “DD-MM-YYYY”, “DD/MM/YYYY”, … Auto Formatted

Below example show how to select initial range of StockChart by setting startValue and endValue in inputFields.


Try it Yourself by Editing the Code below.
 

Composite Attribute (Object)

Object Attributes Type Default Options
inputFields style Object

 
var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeSelector: {
   inputFields: {
     style: {
       fontColor: "#5f5f75"
     }
   },
   .
 },
 .
 .
});
stockChart.render();

Below example shows how to style inputFields.


Try it Yourself by Editing the Code below.




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