src/plotting.js

const DEFAULT_LAYOUT = {
    title: {
        text: 'Plot Title',
        font: {
            size: 19
        },
        y: 0.87

    },
    xaxis: {
        title: {
            text: 'X-axis',
            font: {
                size: 15
            }
        },
        tickfont: {
            size: 14
        },
        showgrid: false,
        mirror: true,
        ticks: 'outside',
        showline: true,
    },
    yaxis: {
        title: {
            text: 'Y-axis',
            font: {
                size: 15
            }
        },
        showgrid: false,
        mirror: true,
        ticks: 'outside',
        showline: true,
        tickfont: {
            size: 14
        }
    },
    legend: {
        orientation: 'v',
        xanchor: 'right',
        yanchor: 'bottom',
        x: 1,
        y: 0,
        font: {
            size: 14
        },
        bgcolor: 'rgba(0,0,0,0)',
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const plotElements = document.querySelectorAll('[id^="plot-"]');
    plotElements.forEach((elem) => {
        const plotName = `${elem.id.replace('plot-', '')}`;
        fetch(`data/plots/${plotName}.json`)
        .then(response => response.json())
        .then(data => {
            const traces = [];
            for (const key in data.data) {
                const trace = {
                    x: data.data[key].x,
                    y: data.data[key].y,
                    type: 'scatter',
                    mode: 'lines',
                    line: {
                        width: 2.5
                    },
                    name: data.data[key].label
                };
                traces.push(trace);
            }
            const layout = _.merge(DEFAULT_LAYOUT, data.layout);
            console.log(layout);

            Plotly.newPlot(elem, traces, layout);
        })
        .catch(error => console.error('Error loading the data:', error));
    })
});