Access variable inside the function ::TypeScript & Angular2

Question

I have a c3.js library which draws a chart inside my angular2 file. The drawing script is inside a function:

private draw() {

 let chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250, 130, 50, 20, 10, 40, 15, 25, 390],
      ['data2', 50, 20, 10, 40, 15, 25, 542, 30, 200, 100, 333, 150, 250]
    ],
    type: "line"
  }   

});

}

c3.js library provides a possibility to change the type of the chart from line to spline , by using following function:

chart.transform('spline');

But unfortunately I dont have an access to this chart variable, since its inside the draw() function.

I want to put this chart.transform('spline'); function inside a button, to let the user change it dynamically.

~ I need some way to make it work, any help highly appreciated!

Answer 1

chart:any;

private draw() {

 this.chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250, 130, 50, 20, 10, 40, 15, 25, 390],
      ['data2', 50, 20, 10, 40, 15, 25, 542, 30, 200, 100, 333, 150, 250]
    ],
    type: "line"
  }   

});

you can use this.chart anywhere

Answer 2

try to initialize chart :

chart: any = {};

then call it

this.chart.transform('spline');