How to change type dynamically

[manvfx]

I want change type highcharts with click button. for example:

html file:

<button (click)="barChart()"></button>

ts file:

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { ChartDialogComponent } from '../../misc/dialogs/chart-dialog/chart-dialog.component';
import { Chart } from 'angular-highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {

  chartTitle : string;
  chartType : string;

  constructor() { }

  ngOnInit() {
  }

  chart = new Chart({
      chart: {
        type: this.chartType
      },
      title: {
        text: 'title'
      },
      credits: {
        enabled: false
      },
      series: [{
        name: 'Line 1',
        data: [1, 2, 3]
      }],      
    });

  barChart(){
    console.log('bar chart');
    debugger;
    if (this.chart.options.chart.type === 'line') {
        this.chart.options.chart.type = 'bar'
        debugger;
    } else {
        this.chart.options.chart.type = 'line'
    }
  }
}

[bheda91]

There is option to update anything in chart, for that you have to store chart instance variable from onload event of chart.

In HTML, <chart [options]="chartOptions" (load)="saveInstance($event.context)"></chart>

How to load chart instance

Using that instance, you may use like below

saveInstance(chartInstance) { 
     this.chartInstance = chartInstance
}

updateChartType() {
    this.chartInstance.update({
      chart: {
        type: chartType // Anything you want
      }
    });
}

How to update chart

Hope this will help you!

[satyendrasinghpanwar]

@bheda91 - update methods throws error when we change chart type

[bheda91]

@satyendrasinghpanwar Can you please tell me which error you get? And if possible, show me your code?