Next
Update
Prev
Default

You can draw lines and ranges in the chart by creating the <AxisMarker> element tag as a child node of the <annotationElements> element tag or <backgroundElements> element tag. This sample is to show how to draw two horizontal lines and two vertical ranges in the chart using <backgroundElements>.

Two <AxisLine>s are defined to draw two horizontal lines, and two <AxisRange>s are defined to draw two vertical ranges.

...
  <Stroke id="stroke1" color="#6799FF" weight="1"/>
  <Stroke id="stroke2" color="#FF7171" weight="1"/>
...  
  <backgroundElements>
    <GridLines/>
    <AxisMarker>
      <lines>
        <AxisLine value="2000" stroke="{stroke1}" ... />
        <AxisLine value="3000" stroke="{stroke2}" ... />
      </lines>
      <ranges>
        <AxisRange startValue="Jan" endValue="May" horizontal="false">
          <fill>
            <SolidColor color="0x0066FF" alpha="0.3">
          </fill>
        </AxisRange>
        <AxisRange startValue="Aug" endValue="Dec" horizontal="false">
          <fill>
            <SolidColor color="#ffcc00" alpha="0.3">
          </fill>
        </AxisRange>
      </ranges>
    </AxisMarker>                  
  </backgroundElements>
...

© 2017 KoolChart. All rights reserved.