How can I force a Kendo UI Chart to resize in VueJS?

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();
  }
}

Answer №1

Discovered a workaround to access the resize function, although the solution is not very elegant:

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

// Note: There might be a more optimal method to achieve this functionality.
this.chartInstance._resize();

I am open to suggestions for a better approach that is also type-safe.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Contrast 2 GET objects retrieved from separate controllers

I have 2 collections of data from different controllers. Data Collection 1 (Controller Name): [{id:1,"name":"jakov"},...] Data Collection 2 (Controller Nickname): [{id:1, "nickname" : "jandric", "nameId" :1, "title" : "master"},...] I send data from C ...

First render does not define useEffect

Why am I experiencing an issue here? Whenever I attempt to retrieve data from my API, it initially returns undefined during the first render, but subsequent renders work correctly. const [data, setData] = useState([]) useEffect(() => { const fe ...

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

Javascript promise failing to deliver

As a beginner in the world of JavaScript development, I am excited to be part of the stackoverflow community and have already gained valuable insights from reading various posts. Currently, I am facing an issue where I need to load a file, but due to its ...

Using Angular to dynamically access component properties

Seeking assistance with creating dynamic Tabs in TabView of PrimeNG. The components are displaying properly, but I am unsure how to access their properties. I am following the guidelines provided at https://angular.io/guide/dynamic-component-loader and us ...

Can you outline the key distinctions between AngularJS and ReactJS?

Looking to create a website that will be converted into a mobile application, I realize that my expertise lies more in desktop and Android native development rather than web client side development. After some research, I have decided to utilize HTML5, CSS ...

Utilize string paths for images instead of requires when resolving img src and background-image URLs

I have successfully implemented image loading with webpack using the file loader, but only when I require or import images. I am curious about how create-react-app achieves the functionality where everything in the public folder is accessible, for example, ...

The term 'string' is typically employed as a data type, yet in this instance it is being utilized as an actual value

Just started working with TypeScript and encountered an issue while trying to set the state. Encountered this error message: 'string' is a type and cannot be used as a value here. const state = reactive({ user: { uid: "", ...

Adjust the color of the active link on the page using Angular and CSS

I have a project that I need to modify by adding a sub menu that appears on every page but is only coded once. My goal is to highlight the link for the current page, all within one HTML snippet. Although the list renders correctly, I'm struggling to g ...

Tips for adjusting the dimensions of a cube using keyboard shortcuts:

Adjusting the cube size involves keeping one face stationary while others move and change in position or dimension. The height, depth, and width must be expanded or contracted based on user input from the keyboard. I have managed to create a cube, but so ...

What is the best way to transfer parameters from the Vue root to a component?

Currently, I am attempting to transfer a string value from index.cshtml to the main Vue element. The specific parameter I want to pass is: userId Location: Index.cshtml (this is where the parameter is obtained) @using Microsoft.AspNetCore.Identity @inje ...

What's the best way to integrate Bootstrap into my HTML document?

Hey there, I'm new to the coding world and just started learning. I could use some assistance with including Bootstrap v5.1 in my HTML code. The online course I'm taking is using an older version of Bootstrap, so I'm having trouble finding t ...

Adding a stylesheet dynamically in Angular 2: A step-by-step guide

Is there a method to dynamically add a stylesheet URL or <style></style> in Angular2? For instance, if the variable isModalOpened is set to true, I want to apply certain CSS styles to elements outside of my root component, such as the body or ...

Include CakePHP named parameters in the URL when selecting from a list

If I have a selection list like the one below: <select name='languages'> <option value='german'>German</option> <option value='english'>English</option> </select> How can I use Jav ...

Uh-oh, Ajax encountered a 500 Internal Server Error!

Utilizing ajax to fetch events from my database has hit a snag. Instead of displaying the results, there is nothing visible on the screen, and the console is showing this error message: POST http://www.example.com/system/live_filter.php 500 (Internal Se ...

What is the best way to grab just the whole number from a string in JavaScript?

I'm facing an issue with a specific string format: const value = "value is 10"; My goal is to retrieve the integer 10 from this string and store it in a separate variable. How can I achieve this efficiently? ...

How can you insert a title or key into an array containing numerous objects using javascript?

I have a function that extracts data from files and returns it in an array const extractTestCases = () => { const filesArray = [] const filterTestSuite = files.filter(test => test.includes('.test.ts')) filterTestSuite.forEach(te ...

"Can someone guide me on the process of transmitting data to a client using Node in combination with

I am new to web development and struggling to understand how to transfer data from the Node server to the client while also displaying an HTML page. I am aware that res.send() is used to send data, but I'm having difficulty maintaining the client disp ...

Struggling to understand the concept of utilizing Promises for data retrieval

I'm currently facing an issue with my async function that awaits a GraphQL call. Even though the call returns a Promise containing the desired data, I'm struggling to access it effectively. Below is the snippet of code in question: export async ...

Incorporate a hyperlink into a React Material-UI DataGrid

While utilizing the DataGrid component from Material-UI, I am trying to add a link to the end of each row. However, the output is currently displaying as: ( [object Object] ). https://i.stack.imgur.com/2k3q2.png I would like for it to show the record ID, ...