Next
Update
Prev
Default

You can combine more than two types of charts in a single chart. This type of chart is called a combination chart, and the <Combination3DChart> element tag is used to create a combination 3d chart in KoolChart.

In the above sample chart, one <Column3DSeries> element tag and one <Line2DSeries> element tag are defined as child nodes of the <series> element tag.

An additional vertical axis ( Y-Axis ) is defined for the line chart (<Line2DSeries>) in the above sample chart. As the following layout shows: the <verticalAxis> element tag is created as a child node of the <series> element tag, and this axis is drawn at the right of the chart.

...
<Combination3DChart showDataTips="true" >
  ...
  <series>
    <Column3DSeries ... >
    ...
    </Column3DSeries>
    
    <Line2DSeries ... styleName="lineSeriesLabel" >
      <verticalAxis>
        <LinearAxis id="vAxis2" >
      </verticalAxis>
    ...
    </Line2DSeries>
  </series>
  <verticalAxisRenderers>
    ...
    <Axis3DRenderer axis="{vAxis2}" showLine="true" />
  </verticalAxisRenderers>
  
</Combination3DChart>
<Style>.lineSeriesLabel{color:#777777;fontWeight:normal;}
</Style>
...

<Line2DSeries>

styleName The styleName attribute is used to set the CSS style of the line. In the above sample chart, The "lineSeriesLabel" style is used (styleName="lineSeriesLabel"), which is defined in the <Style> element tag.

<Axis3DRenderer>

axis The axis attribute determines which axis will be drawn. The valid value is the ID of <horizontalAxis> or <verticalAxis>.
showLine The showLine attribute determines whether or not to display the line for Axis.

© 2017 KoolChart. All rights reserved.