Search code examples
angularkendo-chartkendo-ui-angular2

Kendo UI Chart Angular 2 combining area and column series prevents area from filling chart


When combining an area series with a column series the area no longer fills the chart completely to each axis as it does when there is no column series.

Area series only:

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item type="area" [data]="[1, 2, 3, 5]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="area" [data]="[-1, -2, -3, -5]">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

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

Area and column series:

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item type="area" [data]="[1, 2, 3, 5]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="area" [data]="[-1, -2, -3, -5]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="column" [data]="[-1, -2, -3, -5]">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

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

Is there any configuration that allows the area series to extend to each axis (i.e. fill the entire chart) when a column series is present?


Solution

  • The answer is no, there isn't. Quoting a response on Github:

    I am afraid that there isn't. The column series require not justified axis in which case the points will be positioned in the middle of the categories.

    https://github.com/telerik/kendo-angular/issues/347