To draw a stepped line in the line chart, you must set the value of the form attribute to "step" in the <Line2DSeries> element tag.

<Line2DSeries labelPosition="up" yField="Price" form="step" radius="5" 
  itemRenderer="CircleItemRenderer" displayName="$ Per Barrel" showValueLabels="[5,6,7]">


labelPosition The labelPosition attribute controls the positioning of labels. The valid values for this attribute are "up", "down", "both" and "none". If the value is "up", labels will be displayed above the line, and the default value is "none".
yField The yField attribute determines which field in the Data Object will be used as the Y-axis( vertical axis ) values. In the above chart, the "Price" is used.
form The form attribute is used to draw the different types of line in the line chart. The valid values are "segment" ( data points are connected by a straight line. ), "curve" ( data points are connected by a curved line. ), "step" ( data points are connected by a stepped line starting with the horizontal line. ) and reverseStep. The default value is "segment".
radius The radius attribute determines the radius of the shape displayed at each data point.
displayName The displayName attribute is used to set what text will be displayed in tooltips. ( this text will be also displayed in the Legend. )
itemRenderer The itemRenderer attribute determines what shape will be drawn at the data points in the line. The valid values are "DiamondItemRenderer", "CircleItemRenderer", "TriangleItemRenderer", "CrossItemRenderer", "XShapeItemRenderer", "IShapeItemRenderer", "RectangleItemRenderer".
showValueLabels The showValueLabels attribute is used to display labels selectively when the labelPosition attribute is defined as "up", "down" or "both". The first index of the Data Object is "0".

© 2017 KoolChart. All rights reserved.