Giraffe and two lines graph

InfluxDB 2 Dashboards
2

What I have done. I’m not using JSX:

class PlotRenderer extends React.Component {
    render() {
        var style = this.props.style;
        var tsSerie = this.props.tsSerie;
        var valueSerie = this.props.valueSerie;
        var tokenName = this.props.tokenName;
        var gridColor = this.props.gridColor || "#d9d9d9";
        var interpolation = this.props.interpolation || "monotoneX";

        var lineLayer = {
            type: "line",
            x: "_time",
            y: tokenName,
            colors: ["green", "red", "yellow"],
            interpolation: interpolation
        };

        var table = Giraffe.newTable(tsSerie.length)
            .addColumn("_time", "dateTime:RFC3339", "time", tsSerie)
            .addColumn(tokenName, "integer", "number", valueSerie)

        var config = {
            table,
            layers: [lineLayer],
            gridColor: gridColor
        };

        var SimplePlot = React.createElement(Giraffe.Plot, {config}, tokenName);
        return React.createElement("div", {style}, SimplePlot);
}

And it’s called by

function renderGraf(component, props) {
    var grafDiv = document.getElementById("graph_giraffe");
    
    ReactDOM.render(
        React.createElement(component, props),
        grafDiv
    );
}

renderGraf(PlotRenderer, props);

It works well with ine graph, but I want to give the user ti be able to add a graph for another valueSerie he selects on the same tsSerie (like in the example StoryBook in line graph tab)

Thank you for your help