I am new to plotly and I'm currently trying to replicate a straight forward bar chart : Link.

I have created an angular component for the same and I installed the package via: npm i --save plotly.js-dist-min

Here is the code:

var xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
var yArray = [55, 49, 44, 24, 15];

var data = [{
  x:xArray,
  y:yArray,
  type: "bar"
}];

var layout = {title:"World Wide Wine Production"};

Plotly.newPlot("bars", data, layout);

The error goes away when I remove type: "bar". However, I get a line chart when type is removed.

and the error displayed is:

Argument of type '{ x: string[]; y: number[]; type: string; }[]' is not assignable to parameter of type 'Data[]'. Type '{ x: string[]; y: number[]; type: string; }' is not assignable to type 'Data'. Type '{ x: string[]; y: number[]; type: string; }' is not assignable to type 'Partial'. Types of property 'type' are incompatible. Type 'string' is not assignable to type '"violin" | undefined'.

 Plotly.newPlot("my_bars", data, layout);

I get a similar error for type: pie :

error TS2345: Argument of type '{ labels: string[]; values: number[]; type: string; }[]' is not assignable to parameter of type 'Data[]'. Type '{ labels: string[]; values: number[]; type: string; }' is not assignable to type 'Data'. Type '{ labels: string[]; values: number[]; type: string; }' is not assignable to type 'Partial'. Types of property 'type' are incompatible. Type 'string' is not assignable to type '"pie" | undefined'.

 Plotly.newPlot("my_pie", data, layout);