High Stock Charts
Overview
The high stock charts app enables you to add charts to your workspace.
Combo Chart
There are times when you wish to overlay one type of chart on another, or perhaps right below the other chart. For example, you
may wish to chart a line chart displaying a stock price, and a bar chart underneath showing the stock trading volume on that day.
To accomplish this, you use a combination chart, which plots both charts on the same chart.
Note, this is differnt from adding multiple series to a chart, such as multiple lines. Typically, combination charts have different chart
types within the same chart. It is possible to include multiple charts of the same type, but there are some complexities involved.
To get a combination chart,
choose the combination chart type in the chart drop down. You will be presented with chart selector window. From here,
choose the first chart you wish to add. THis will open the appropriate chart dialog box. After selecting the chart properties, you
are returned back to the chart selector window. You can continue to add different charts until you have finished. (Typically, you will
not want more than two or three).
After you have selected all the chart types, click the add button on the chart selector. This will add all charts together on the same
chart canvas.
Each chart displayed receives its own y axis. Initially, each y axis will be rendered and they will overlap. You will need to edit
the y axis information in order to customize the display of the chart. In the config text area, the yAxis property with have an
array as its value, which lists the properties of each y axis. Each chart series is assigned a yAxis index to which it is attached.
As you edit the yaxis properties, it can affect the rendering of the series to which it attached.
For each chart, there will be a yaxis declared. In the yAxis object, there is a height, top and offset properties.
height: '100%',
top: '0%',
offset: 0,
If you wish to move one chart below the other, you can edit the yAxis display properties.
For instance, if you have two charts and want each to take 50% of the charting
area, edit the first yAxis to
height: '50%',
top: '0%',
offset: 0,
and the second yAxis to
height: '50%',
top: '50%',
offset: 0,
Video Demos
Highcharts App Introduction
Multiple Series and Combination Charts
dmeonstrates various ways to add multiple series to a chart, as well as multiple different chart types rendered together.
