Chart.js: Chart type not changing on destroy() then new Chart() in 2.0

[nbyloff]

Trying to swap chart type based on user input. Using the vue.js framework. By default, the page renders with a line chart and some dummy data. I change the chart type to bar, an event fires to change the chart type data, destroy() the old chart, and re-create a new one.

With this setup (local project installed via npm)

var context = document.querySelector('#graph').getContext('2d');

var chartConfig = {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'March'],
    datasets: [{
            label: 'Some Label',
        data: [20, 144, 80]
    }]
  },
options: {
     responsive: true
 }
}

var ourChart = new Chart(context, chartConfig);

//called when clicking a button
function changeToBarChart() {
  chartConfig.type = 'bar';
  ourChart.destroy();
  ourChart = new Chart(context, chartConfig);
}

I expect the line chart to be removed and add back a bar chart. However, it removes the line chart, and re-adds back a line chart.

However if I use this setup with chart.js 1.0.2, it works great: JSBin

Then I tried to use that style in my local project to see if I could get it to swap at all.

if (this.currentChartType == 'line') {

    this.ourChart = new Chart(context).Line(chartConfig);   

} else if (this.currentChartType == 'bar') {

    this.ourChart = new Chart(context).Bar(chartConfig);    
}

With the above if / else if I get the error Uncaught TypeError: (intermediate value).Line is not a function on page render and no chart displays at all.

Here is the data setup I am using when trying to revert to the new Chart(context).Line() setup that gives me this error above:

var chartConfig = {
    labels: ['Jan', 'Feb', 'March'],
    datasets: [
      {
        data: [30, 122, 80]
      }
    ]
};

So essentially:

• [2.0] When assigning chart type as a property in the config object, the chart loads, but I can't destroy and create a new one in it's place.
• If I use v1.0.2, this seems to work with the chart type method on a new Chart
• [2.0] new Chart(context).Line(chartConfig) throws an error on page render

[etimberg]

I think I know what happens here. The old line type is attached to each dataset. I think this will be fixed in the next release as the result of some other changes we made to how data is attached to the datasets. In the meantime, as a work around you could do

function changeToBarChart() {
  chartConfig.type = 'bar';
  ourChart.destroy();

  chartConfig.data.datasets.forEach(function(dataset) {
    dataset.type = 'bar'
  });
  ourChart = new Chart(context, chartConfig);
}

In terms of Chart(ctx).Line(config) and Chart(ctx).Bar(config) those interfaces are not supported in v2.

[nbyloff]

OK good to know. I tried your suggestion, but it didn't work for me. Breakpointing on the forEach loop did show the dataset.type was still line and got reset to bar. Graph still didn't switch to a bar though. Here is my entire vue setup.

        data() {
            return {
                ourChart: '',
                chartConfig: {
                    type: this.currentChartType,
                    data: {
                        labels: ['Jan', 'Feb', 'March'],
                        datasets: [
                          {
                            label: 'Some Label',
                            data: [30, 122, 80]
                          }
                        ]       
                    }
                }
            };
        },

        ready() {
                        //executed on page render/ready
            this.drawChart();           
        },

        methods: {

            drawChart: function() {
                //var context = this.$els.canvas.getContext('2d');
                var context = document.querySelector('#graph').getContext('2d');

                console.log('type: ' + this.currentChartType); //initial render is 'line'
                this.ourChart = new Chart(context, this.chartConfig);
            }

        },

        events: {
            'chart-type-changed': function(chartType) {
                console.log(chartType); //returns 'bar'
                this.currentChartType = chartType;

                this.ourChart.destroy();

                this.chartConfig.data.datasets.forEach(function(dataset) {
                    dataset.type = chartType;
                });

                this.drawChart();
                this.ourChart.update();
            }
        }

This is a vue specific solution, but for now I just use their dynamic component feature, and build a template for each chart type and swap out the entire component instead of just changing the chart type.

<component :is="currentChartType"></component>

[etimberg]

Confirmed fixed in latest version. Check out http://codepen.io/anon/pen/ezJGPB and press the button under the chart to change it from a bar to a line chart

[canelacho]

Excellent! in the nail....