Next
Update
Prev
Default

If the value of the baseLineMode attribute is "true", then the lower-valued area ( compared to the value of the baseValue attribute ) can have different color than the upper-valued area using the areaDeclineStroke and areaDeclineFill attributes.

...
<Area2DSeries ... baseLineMode="true" baseValue="180" showMaxValueLabel="true" showMinValueLabel="true" upLabelJsFunction="upFunc" downLabelJsFunction="downFunc" >
  <areaDeclineStroke>
  	<Stroke color="#00c0c7" weight="2"/>
  </areaDeclineStroke>
  <areaDeclineFill>
  	<Stroke color="#00c0c7" alpha="0.5"/>
  </areaDeclineFill>
  ...
</Area2DSeries>
...
function upFunc(seriesId, index, data, values) {
  return  "Highest : <b>" + values[1] + '</b>';
}

function downFunc(seriesId, index, data, values) {
  return  "Lowest : <b>" +  values[1] + '</b>';
}

<The attributes for Baseline>

baseLineMode The baseLineMode attribute determines whether or not to change the style of the lower-valued line and area. ( "true" or "false". the default value is "false" )
baseValue If baseLineMode="true", then the color and weight of upper-valued ( compared to the value of the baseValue attribute ) line and area will be defined by <areaStroke> and <areaFill>, and the lower-valued line and area will be defined by <areaDeclineStroke> and <areaDeclineFill>
showMaxValueLabel The showMaxValueLabel attribute determines whether or not to show only the minimum value in the chart. ( "true" or "false". the default value is "false" )
showMinValueLabel The showMinValueLabel attribute determines whether or not to show only the minimum value in the chart. ( "true" or "false". the default value is "false" )
upLabelJsFunction The upLabelJsFunction attribute is used to set the user-defined JavaScript function when showMaxValueLabel="true" or labelPosition="up". The valid value is the name of JavaScript function.
The forth parameter of the function contains values - values[0]: X-axis value, values[1]: Y-axis value
downLabelJsFunction The downLabelJsFunction attribute is used to set the user-defined JavaScript function when showMinValueLabel="true" or labelPosition="down". The valid value is the name of JavaScript function.
The forth parameter of the function contains values - values[0]: X-axis value, values[1]: Y-axis value
areaDeclineStroke The areaDeclineStroke attribute is used to set the style of the line that connects the points in the lower-valued area.
areaDeclineFill The areaDeclineFill attribute is used to set the style of the lower-valued area.

© 2017 KoolChart. All rights reserved.