Home Forums Chart Support Charts with drop down button to filter

Charts with drop down button to filter

Viewing 4 posts - 16 through 19 (of 19 total)
  • #28763


    Chart animates only on the first/initial render, as of now. To animate at every subsequent selection, you can destroy and re-create the chart as shown in the code snippet below –

    $( ".dropdown" ).change(function() {
      chart = new CanvasJS.Chart("chartContainer",chartOptions);
      chart.options.data[0].dataPoints = [];
    function selectDataSeries(){
      var selected = element.options[element.selectedIndex].value;
      dps = jsonData[selected];
      for(var i in dps) {
        var xVal = dps[i].x;
        chart.options.data[0].dataPoints.push({x: new Date(xVal), y: dps[i].y});

    Please take a look at this JSFiddle for a working example.

    Render Chart from Dropdown value with Animation

    Indranil Deo
    Team CanvasJS


    Really appreciate your guidance here Indranil!


    Can anyone help me in displaying the different chart selected from dropdown menu using angular?



    To modify a chart based on dropdown selection you need to update the chart options / data according to the options selected from the dropdown list using the ngModelChange event. Please check the code snippet below –


    <select [(ngModel)]="selectedValue" (ngModelChange)='onChange($event)'>
      <option *ngFor="let option of options" [value]="option.id">


      let dps = this.jsonData[val]; 
      this.chart.options.data[0].dataPoints = dps;

    Also, kindly take a look at this StackBlitz for a working example.

    Chart from Dropdown list in Angular

    Indranil Deo
    Team CanvasJS

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.