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 Editing The Code

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 Editing The Code

  Also See:    

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