Home Forums Chart Support Charts with drop down button to filter Reply To: Charts with drop down button to filter



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