Next
Update
Prev
Default

A plot chart displays data as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis. The <Plot2DChart> element tag is used to create a plot chart in KoolChart, and the series element tag for the plot chart is <Plot2DSeries>.

You can draw grid lines in the background of the chart by using <GridLines> element tag and the <CrossRangeZoomer> element tag can be used to display crosshair and zoom in on a certain area in the chart.

...
<NumberFormatter id="numFmt" precision="0"/>
<Plot2DChart showDataTips="true" >
  ...
  <backgroundElements>
    <GridLines direction="both" />
  </backgroundElements>
  
  <series>
    <Plot2DSeries yField="Revenue" radius="5" displayName="Profit">
    ...
    </Plot2DSeries>
    ...
  </series>
  
  <annotationElements>
    <CrossRangeZoomer zoomType="both" horizontalLabelFormatter="{numFmt}" />
  </annotationElements>
</Plot2DChart>
...

<Plot2DSeries>

radius The radius attribute determines the radius size of the plot.

<GridLines>

direction The direction attribute determines the direction of line ( vertical line, horizontal line, both ). The valid values are "vertical", "horizontal", "both" and the default value is "horizontal".

<CrossRangeZoomer>

zoomType The zoomType attribute determines which axis will be zoomed. The valid values are "vertical", "horizontal", "both". The default value is "both".
horizontalLabelFormatter The horizontalLabelFormatter attribute is used to set the format of the label in the horizontal line of crosshairs.

© 2017 KoolChart. All rights reserved.