JavaScript Chart - Multiple Axes Dual Y-Axes

VIEW MORE FEATURES
SAVE
VIEW HTML
EDIT ON CODEPEN
Multiple axes can be displayed in the chart created by using KoolChart's JavaScript charting library. If you need to use two or more vertical axes in a chart, set the <verticalAxis> element to be used by the series data within the series element. In this exemple two <verticalAxis> elements are set. One is set outside of the <series> element (the defaule axis) and the other is set within the series element (<Line2DSeries>) that uses the axis.
<verticalAxis>
<LinearAxis id="vAxis1" formatter="{numFmt}" maximum="2200" />
</verticalAxis>

<series>
...
<Line2DSeries selectable="true" yField="Revenue" radius="4" form="curve" displayName="Revenue" itemRenderer="CircleItemRenderer">
<verticalAxis>
<LinearAxis id="vAxis2" interval="400" formatter="{numFmt}" maximum="1800" />
</verticalAxis>
...
<series/>

<verticalAxisRenderers>
<Axis2DRenderer axis="{vAxis1}" showLine="false"/>
<Axis2DRenderer axis="{vAxis2}" showLine="true">
<axisStroke>
<Stroke color="#f9bd03"/>
</axisStroke>
</Axis2DRenderer>
</verticalAxisRenderers>