JavaScript Target vs Actual Chart Displays Images Based on Target and Actual Values

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A target vs actual chart shows the difference (variance) between actual and target (budget). To create a target vs actual chart using KoolChart's JavaScript charting library, the user must first set a <VTarget2DResultSeries> (or <VTarget3DResultSeries>) element that corresponds to the actual value, and then set a <VTarget2DGoalSeries> (or <VTarget3DGoalSeries>) element that corresponds to the target value within a <Combination2DChart> (or <Combination3DChart>) element.

In this JavaScript chart example, a <VTarget2DResultSeries> element and a <VTarget2DGoalSeries> element are set within a <Combination2DChart> element.
<Combination2DChart showDataTips="true">
...
<series>
<VTarget2DResultSeries columnWidthRatio="0.54" labelPosition="inside" yField="Result" displayName="Result" color="#ffffff" htmlJsFunction="userElementFunc">
...
</VTarget2DResultSeries>
<VTarget2DGoalSeries columnWidthRatio="0.54" labelPosition="outside" yField="Goal" displayName="Goal" color="#f7921e" htmlJsFunction="userElementFunc">
...
</VTarget2DGoalSeries>
</series>
...
</Combination2DChart>