When integrating Kendo UI's Chart component within a Vue application, how can we trigger the chart to refresh or redraw?
Although the chart automatically adjusts to changes in width by filling its parent container horizontally, noticeable stretching occurs in its graph, title text (also known as the legend), and axis labels. This stretching suggests that the chart is rendered as an SVG image. To address this issue, I need to programmatically trigger a resize, redraw, or re-render process, which is documented here for the jQuery version of the package.
I have already set up a resize handler 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 = [...]; // data goes here
onResize() {
// The resize method cannot be found in this scope:
// this.$refs.chart.resize();
// I logged the chart component to search for the refresh method...
console.log(this.$refs.chart);
console.log(this.$refs.chart.kendoWidget());
// After extensive searching through the objects in the browser console,
// I did not find it there.
// Force updating the component works, but it may be resource-intensive:
// this.$forceUpdate();
}
}