We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Redraw not working

Thread ID:





128463 Jan 24,2017 02:38 PM UTC Mar 6,2017 12:52 PM UTC Angular 9
Tags: ejChart
Asked On January 24, 2017 02:38 PM UTC

I was trying to use the redraw method on a chart using the api with jquery


It wasn't working, but I was wondering what the way to do it in Angular 2 is?

Replied On January 24, 2017 03:43 PM UTC

I've used ViewChild to get the chart and then I have looked for a redraw method but have been unable to find it. If this is the correct way to do it I just need to know where the redraw method is.

Replied On January 24, 2017 03:47 PM UTC

Like this 

@ViewChild('grid') chart: any;

<ej-chart #grid>

Use this.grid to access it.

Replied On January 24, 2017 10:39 PM UTC

changed #grid to #chart for a better name

attempted to use 

@ViewChild('chart') chart: any;

was unable to get any results, I made sure to call it after view init, and I know I have the item because I can log it.

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 25, 2017 01:32 PM UTC

Hi Zack, 

Thanks for using Syncfusion product. 

We have analyzed your query and prepared a sample with respect to your requirement. In this we have two data sets and in a button click we have changed the datasource and redrawn the chart. Kindly find the code snippet below to achieve this. 

Angular 2:  

<input type="button" onclick="UpdateChart()" value="Update using Redraw method" /> 
var data5 = [ 
              { x: 0, y: 5 }, { x: 1, y: 12 }, { x: 2, y: 8 }, { x: 3, y: 10 }, { x: 4, y: 15 } 
            var data10 = [ 
              { x: 0, y: 5 }, { x: 1, y: 12 }, { x: 2, y: 8 }, { x: 3, y: 10 }, { x: 4, y: 15 }, 
              { x: 5, y: 5 }, { x: 6, y: 12 }, { x: 7, y: 8 }, { x: 8, y: 10 }, { x: 9, y: 15 }, 
            function UpdateChart() { 
                //Get Chart instance 
                var chart = $('#container').ejChart('instance'); 
                //Change the data source 
                chart.model.series[0].dataSource = chart.model.series[0].dataSource.length == 5 ? data10 : data5; 
                //Redraw the chart 


For your reference we have attached the sample. Kindly find the sample from below location. 

Since the issue is not reproduced at our end, kindly revert us with your sample, so that we can analyze further and provide you the solution sooner. 


Replied On January 25, 2017 02:37 PM UTC

I'm running into some errors and have some clarification 

    <ej-chart #chart>
        <e-series type="polar" drawType="column" enableAnimation="true" [points]="data">

Chart is simple like this. Want to do something the Angular 2 way like this:

@ViewChild('chart') chart: any;


When I tried to use the attached code I got some errors, when I logged the console.log($('#chart').ejChart('instance')); I got an empty array. I'm assuming this has something to do with the difference between div as a chart and actually using ej-chart. If there isn't a way to do this using Angular 2 ViewChild please advise and I'll switch to the div method with jQuery.

Replied On January 25, 2017 03:41 PM UTC

Also the sample was in Angular 1

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 27, 2017 01:31 PM UTC

Hi Zack, 

Thanks for you update.  

We have analyzed your query. By using the below code snippet, you can able to redraw the chart. Need to specify as highlighted in code snippet. 

Angular 2: 

<ej-chart #contain id="container"></ej-chart> 

@ViewChild('contain') chart: any;  

  ngAfterViewInit() { 
        // After the view is initialized, chart will be available 
    update() { 

For your reference we have attached the sample, kindly find the sample from below link. 


Bernd Schuhmacher
Replied On March 4, 2017 05:59 PM UTC


I am trying to change a chart too. But with no luck so far.

With you demo given ( in which I could not see a change in the chart) I set up the following demo:

import { ComponentViewEncapsulationViewChildInjectable } from '@angular/core';
import { CommonModule } from "@angular/common";
import { EJComponents } from './ej/core';
import { EJ_CHART_COMPONENTS } from './ej/chart.component';

declare let ejany;

    selector: 'ej-app',
    templateUrl: 'app/app.component.html'

export class AppComponent {
    data1 = [
        { x: 0y: 5 }, { x: 1y: 12 }, { x: 2y: 8 }, { x: 3y: 10 }, { x: 4y: 15 }

    data2 = [
        { x: 0y: 7 }, { x: 1y: 2 }, { x: 2y: 5 }, { x: 3y: 14 }, { x: 4y: 10 }
    private Tabelle1;

    constructor() {
        this.Tabelle1 = this.data1;
    update() {
    changeChart() {
        if (this.Tabelle1 == this.data1this.Tabelle1 = this.data2;
        else this.Tabelle1 = this.data1;



    Syncfusion Javascript Angular 2 Component</h2>
<ej-chart #Chart id="line" style="height: 320px; width: 420px; display:block;" [isResponsive]="true" [legend.visible]="true"
    primaryYAxis.title.text="y" primaryXAxis.title.text="x" >
        <e-series name="Front" fill=#1B93D0 [dataSource]="Tabelle1" xName="x" yName="y"></e-series>
<button (click)="changeChart()">changeData</button>

When the page loads I can see the data of the array data1.

I hoped to see data2 in the chart after clicking the Button.

The console Log shows the data i hoped to see in the chart.

Do you have any hints?



Dharanidharan Dharmasivam [Syncfusion]
Replied On March 6, 2017 12:52 PM UTC

Hi Zack, 

We have analyzed your query. Since the series property in chart is of type, array of objects and the dataSource property is also of type array of object, the one way binding can’t be implemented for this scenario. And this is a limitation. So, you need to assign the data source again to the chart series and then need to redraw the chart. Find the code snippet below. 
Angular 2: 

<button (click)="changeChart()">changeData</button> 
changeChart() { 
        this.Chart.widget.model.series[0].dataSource = this.data2; 

Chart before updating the data: 
After updating the data: 

Sample for reference can be find from below link. 
The properties which support data binding are documented in the below link 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon