options: Object

You can set data, all the attributes/properties of StockChart & its Elements using options object. You can pass the StockChart “options” as a constructor parameter while creating the StockChart object.

Note:
  • This is also the object that you need to modify in order to update the StockChart.
var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 title: {
   text: "StockChart Title"
 },
 .
 . 
});
stockChart.render();
Try Editing The Code

Getting a reference of options Object

Once the StockChart is rendered, you can get a reference to it as shown below

var options = stockChart.options;

You can update a StockChart by modifying its options. But remember to call stockChart.render(); in order to reflect the changes in StockChart.

You can refer to getting started section for examples on updating StockChart

Simple Attributes

Object Attributes Type Default Options Remarks
StockChart animationEnabled Boolean false true, false Enables Animation while rendering the StockChart
StockChart animationDuration Number 1200 1000, 500, … –
StockChart exportEnabled Boolean false true, false –
StockChart exportFileName String “StockChart” “Bitcoin Stock Chart”, “BTC Closing Price”, … –
StockChart theme String “light1” “light2”, “dark1”, “dark2” –
StockChart colorSet String “colorSet1” “colorSet2”, “colorSet3”, … –
StockChart backgroundColor String “#FFFFFF” “red”, “rgb(255,255,255)”, … –
StockChart culture String “en” “es”, … –
StockChart width Number 500 800, 400, … –
StockChart height Number 400 450, 500, … –

In the next editor, StockChart will animate as it renders. You can disable the animation by setting animationEnabled to false.

Try Editing The Code

Composite Attributes (Objects)

Object Attributes Type Default Options Remarks
StockChart options title Object
–
–
–
StockChart options charts Array of Object
–
–
–
StockChart options navigator Object
–
–
–
StockChart options rangeSelector Object
–
–
–
 
var stockChart = new CanvasJS.StockChart("container",
{
 title: {},
 charts: []
 navigator: {},
 rangeSelector: {}
});
stockChart.render();

In the upcoming Sections, we will study about each Composite Attributes in detail.

  Also See:    

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