How to add datapoints to plotly.js in Angular 2+ wrapper

Question

Can anybody say how to use extendTraces functionality of Plotly.js in Angular 2+ wrapper (https://github.com/plotly/angular-plotly.js) for plotly.js? I cannot figure this out from the docs given in the url.

Related to issue: Plotly update data

**** solution **** Below I have changed my original post code to show the working solution. Methods addPoint and addPoint2 (add a new individual data point to an exsisting series) Method addRandomLine() adds the new trace (i.e. a whole new data series):

<button (click)="addRandomLine()" class="button">Add random line</button>
<button (click)="addPoint()" class="button">Add point to 1. series</button>
<button (click)="addPoint2()" class="button">Add point with extendTrace to 1. series</button>

<plotly-plot 
    #chart
    id="plotlyChart"
    [data]="data" 
    [layout]="layout">
</plotly-plot>


import { Component, ViewChild } from '@angular/core';
import { PlotlyService } from '../../shared/plotly.service';

export class LinearChartsComponent {

@ViewChild('chart') el: any;

    public data: any[] = [
        { x: [1, 2, 3, 4], y: [10, 15, 13, 17], type: 'bar',  mode: 'markers', name: 'Bar' },
        { x: [2, 3, 4, 1], y: [16, 5, 11, 9], type: 'scattergl', mode: 'lines', name: 'Lines' },
        { x: [1, 2, 3, 4], y: [12, 9, 15, 12], type: 'markers', mode: 'lines+markers', name: 'Scatter + Lines' },
    ];

constructor(public plotly: PlotlyService) {
}


    public layout: any = {
        title: 'Adding Names to Line and Scatter Plot',
    };

    public addRandomLine() {
        const line: any = { x: [], y: [], mode: 'lines', name: 'Line ' + this.data.length };

        line.x = [1, 2, 3, 4].map(i => Math.round(Math.random() * 10));
        line.y = [1, 2, 3, 4].map(i => Math.round(Math.random() * 20));
        line.mode = ['markers', 'lines', 'lines+markers'][Math.floor(Math.random() * 3)] as any;

        this.data.push(line);
    }


// adds point with relayout-method
addPoint() {

    const line: any = this.data[1];
    line.x.push(line.x.length + 1);
    line.y.push(Math.round(Math.random() * 20));
    this.data[1] = line;

    const update = {
        title: 'New Title',
        data: this.data
    }
    this.plotly.getPlotly().relayout(this.el.plotEl.nativeElement, update);

}

// adds point with extendTraces-method
addPoint2() {
    this.plotly.getPlotly().extendTraces(
        this.el.plotEl.nativeElement,
        { y: [[Math.random()*10]] }, [1]
    );
    this.plotly.getPlotly().extendTraces(
        this.el.plotEl.nativeElement,
        { x: [[this.data[1].x.length + 1]] }, [1]
    );
}

}

Answer 1

The OP has provided a solution by editing the original question. Rather than undo those edits and post the complete solution here, I will just add the OP's plotly-service upon which this solution depends.

import { Injectable } from '@angular/core';
import { Plotly } from './plotly.interface';


@Injectable({
    providedIn: 'root'
})
export class PlotlyService {
    protected static instances: Plotly.PlotlyHTMLElement[] = [];
    protected static _plotly?: any = undefined;

    public static setPlotly(plotly: any) {
        PlotlyService._plotly = plotly;
    }

    public static insert(instance: Plotly.PlotlyHTMLElement) {
        const index = PlotlyService.instances.indexOf(instance);
        if (index === -1) {
            PlotlyService.instances.push(instance);
        }
        return instance;
    }

    public static remove(div: Plotly.PlotlyHTMLElement) {
        const index = PlotlyService.instances.indexOf(div);
        if (index >= 0) {
            PlotlyService.instances.splice(index, 1);
        }
    }

    public getInstanceByDivId(id: string): Plotly.PlotlyHTMLElement | undefined {
        for (const instance of PlotlyService.instances) {
            if (instance && instance.id === id) {
                return instance;
            }
        }
        return undefined;
    }

    public getPlotly() {
        if (typeof PlotlyService._plotly === 'undefined') {
            throw new Error(`Peer dependency plotly.js isn't installed`);
        }

        return PlotlyService._plotly;
    }

    protected waitFor(fn: () => boolean): Promise<void> {
        return new Promise((resolve) => {
            const localFn = () => {
                fn() ? resolve() : setTimeout(localFn, 10);
            };

            localFn();
        });
    }

    public async newPlot(div: HTMLDivElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>) {
        await this.waitFor(() => this.getPlotly() !== 'waiting');
        return this.getPlotly().newPlot(div, data, layout, config).then(() => PlotlyService.insert(div as any)) as Promise<any>;
    }

    public plot(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>) {
        return this.getPlotly().plot(div, data, layout, config) as Promise<any>;
    }

    public update(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>) {
        return this.getPlotly().react(div, data, layout, config) as Promise<any>;
    }

    public resize(div: Plotly.PlotlyHTMLElement): void {
        return this.getPlotly().Plots.resize(div);
    }
}