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 lines and one range in the chart using <backgroundElements>.

Two <AxisLine>s are defined to draw two lines, and one <AxisRange> is defined to draw one range.

The default location of the label is above the line, and you can also display the label below the line by setting labelUpDown="down" in <AxisLine>.

Unlike <annotationElements> if you want to draw grid lines in the background of the chart, then you must define <GridLines/> as a child node of <backgroundElements>.

...
  <backgroundElements>
    <GridLines/>
    <AxisMarker>
      <lines>
        <AxisLine value="2500" lineStyle="dashLine" label="High">
          <stroke>
            <Stroke color="#FF7171" weight="2">
          </stroke>
        </AxisLine>
        <AxisLine value="500" lineStyle="dashLine" label="Low" labelUpDown="down">
          <stroke>
            <Stroke color="#6799FF" weight="2">
          </stroke>
        </AxisLine>                      
      </lines>
      <ranges>
        <AxisRange startValue="500" endValue="2500">
          <fill>
            <SolidColor color="#eeeeee" alpha="0.4">
          </fill>
        </AxisRange>
      </ranges>
    </AxisMarker>                  
  </backgroundElements>
...

© 2017 KoolChart. All rights reserved.