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 it Yourself by Editing the Code below.


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 it Yourself by Editing the Code below.


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.





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