- Stock Scales Features
- Multiple scales and axes
- Comparison Mode
- Stacked Mode
In AnyChart scales control calculations and modes while Axes control axes labels, lines and tick marks. Learn more about basis Axes options available (like tickmarks, axis line and so on) see Axes, to learn more about basic scale options (like maximum, minimum, scale modes and so on) see Scale tutorial.
In this section we will demonstrate only the differences of AnyStock scales from basic charts' ones.
Stock Scales Features
The biggest difference between scales in basic charts and stocks is the fact that you have scales in every plot and have to configure them accorindgly - in different plots. If there is a reason, you can create shared scales, but in most cases configuration goes like this:
// get a plot scale yScale = chart.plot(0).yScale(); // set minimum/maximum and inversion yScale.minimum(1000000); yScale.maximum(350000000); yScale.inverted(true); // create a logarithmic scale var logScale = anychart.scales.log(); chart.plot(1).yScale(logScale);
The result of the configuration shown above, along with some axes tuning can be seen on a sample below:
Multiple scales and axes
AnyChart Stock supports the "Comparison Mode" scale - a very important feature for showing stocks-related information that allows comparing changes in series values. You can compare with the first visible value, series first value and a custom date, see Comparison base section below to learn more.
|No changes, values displayed||anychart.enums.ScaleComparisonMode.NONE||"none"|
|Percent Changes Displayed||anychart.enums.ScaleComparisonMode.PERCENT||"percent"|
|Value Changes Displayes||anychart.enums.ScaleComparisonMode.VALUE||"value"|
In "value" mode the changes are displayed in original scale units.
chart = anychart.stock(); chart.plot(0).yScale().comparisonMode("value");
In "percent" mode the changes are displayed in percents.
chart = anychart.stock(); chart.plot(0).yScale().comparisonMode("percent");
Sample below shows three plots, all three display the same series, but scale comparison mode is set to "None", "Value" and "Percent" to the first, the second and the third plot respectively:
When you work with a scale in Comparison Mode you can choose what value is used as the comparison base. It is done using compareWith() method which accepts values from anychart.enums.ScaleCompareWithMode enum or a date/number representation of a custom date.
The stacked charts are a popular visual aid used for categorizing and comparing the parts of a whole. Each element in the chart represents a whole, and the segments represent parts of that whole. Different colors used for the segments distinguish the categories. Stacked charts are also known as stacked graphs.
Stacking is a special mode of a Scale set by stackMode() method, and several types of series are compatible with this mode. If a series can not be stacked it simply ignores the mode.
There are two modes of stacking: value and percent.
To create a value stacked chart you need to set scale stackMode to "value":
chart = anychart.stock(); chart.plot(0).yScale().stackMode("value");
To create a value stacked chart you need to set scale stackMode to "percent":
chart = anychart.stock(); chart.plot(0).yScale().stackMode("percent");