Combining 100% stacked area and column chart series, force value axis to use column series values only

Question

I want to produce a chart with a 100% stacked area series (shown as an underlay) and a column series. The stacked are series values are to be either 1 or null (i.e. either fill vertically or do not show). I want the value axis to use the column series only and ignore the stacked area series.

Here is a simple chart definition that shows the behaviour:

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item type="column" [data]="[5, 3, 2, 1, 6, 8]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="area" [line]="{ style: 'step' }" [stack]="{ type: '100%' }" [data]="[1, 1, 1, null, null, 1]">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

Here is a Plunker:

http://plnkr.co/edit/nATHiFiqr8cTVQxg20Ez?p=preview

Instead of the value series labels show 0-800%, it should rather show 0-8. Is this possible to achieve?

Answer 1

I resolved this by adding separate value axis configs for each series, hiding the stacked area axis, and forcing the column axis to format to a number, rather than a percentage.

<kendo-chart>
  <kendo-chart-value-axis>
    <kendo-chart-value-axis-item>
      <kendo-chart-value-axis-item-labels format="n"></kendo-chart-value-axis-item-labels>
    </kendo-chart-value-axis-item>
    <kendo-chart-value-axis-item [visible]="false" name="secondAxis">
    </kendo-chart-value-axis-item>
  </kendo-chart-value-axis>
  <kendo-chart-series>
    <kendo-chart-series-item type="column" [data]="[5, 3, 2, 1, 6, 8]">
    </kendo-chart-series-item>
    <kendo-chart-series-item axis="secondAxis" type="area" [line]="{ style: 'step' }" [stack]="{ type: '100%' }" [data]="[1, 1, 1, null, null, 1]">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

Plunker demonstration:

http://plnkr.co/edit/P1KpqJLvnnyNOn1a6Lyc?p=preview