Triggering resize of Kendo UI Chart in VueJS?

Question

When using Kendo UI's Chart component in Vue, how to trigger chart redraw / refresh?

While the chart do adjust to resize width changes by horizontally filling up it's parent container, it's graph and most notably title text (a.k.a. legend) and axis labels are stretching, indicating that the chart renders into a SVG image. This stretching is undesirable, so I'm needing to programmatically trigger resize / redraw / re-render as documented here if using jQuery version of the package.

I have resize handler in place using Vue.resize:

<kendo-chart
    ref="chart"
    :series="series"
    v-resize:throttle.500="onResize"
/>

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MyChartComponent extends Vue {
  series = [...]; // some data here

  onResize() {
    // Resize method not found in this scope:
    // this.$refs.chart.resize();

    // Logging chart component to search for the refresh method...
    console.log(this.$refs.chart);
    console.log(this.$refs.chart.kendoWidget());
    // Did not find it there with extensive searching
    // through the objects in browser console.

    // Component's force update works but would be a costly operation:
    // this.$forceUpdate();
  }
}

ux.engineer ux.engineer · Accepted Answer · 2019-12-02T07:16:41

Found a way to access the resize method, although not an entirely clean solution:

get chartWidget(): any {
  return (this.$refs.chart as KendoChart).kendoWidget() as any;
}

// eslint-disable-next-line no-underscore-dangle
this.chartWidget._resize();

Interested in hearing a better way which would also work with correct types.

Triggering resize of Kendo UI Chart in VueJS?

1 Answers