I'm interested in creating a scatter plot within an Angular application using plot.ly.
Most examples online utilize non-typed objects like this:
var trace = {
x: [1, 2, 3],
y: [4, 5, 6],
. . .
}
While I can follow this method, I prefer to leverage the types from @types/plotly.js
since I am working with TypeScript. One of the defined types is ScatterData
, which has specific properties such as:
export type Data = Partial<ScatterData>;
export interface ScatterData {
type: 'bar' | 'scatter' | 'scattergl' | 'scatter3d';
x: Datum[] | Datum[][];
y: Datum[] | Datum[][];
z: Datum[] | Datum[][] | Datum[][][];
xaxis: string;
yaxis: string;
...
}
Here's an example where I faced an issue:
const data: Plotly.Data = {
type: 'scatter',
x: [],
y: [],
};
data.x.push(12);
The error message highlights the call to push with
TS2349: Cannot invoke an expression whose type lacks a call signature
. Even attempting a type guard like
if(data.x instanceof Ploty.Datum[]) ...
results in a failure due to the absence of the Datum property.
Although I could resolve these challenges by omitting Plotly.Data
, I would prefer not to resort to that solution.