How to create multi 2D line plot of prices over time

I'm trying to create plot using Billboard.js that will show prices overtime from different shops.

Here is my attempt:

dayjs.locale('pl');

fetch('https://jcubic.pl/price.json')
  .then(res => res.json())
  .then(data => {
    var chart_data = {
        xs: {},
        columns: [],
        type: 'line'
    };
    Object.keys(data).map((shop, i) => {
        const date = `${shop}_date`;
        var prices = [shop];
        var dates = [date];
        data[shop].forEach(arr => {
            const [ price, date ] = arr;
            prices.push(price);
            dates.push(dayjs(arr[1]).format('MMM DD'));
        });
        chart_data.xs[shop] = date;
        chart_data.columns.push(prices);
        chart_data.columns.push(dates);
    });
    console.log(chart_data);
    bb.generate({
        bindto: "#chart",
        data: chart_data
    });
    //console.log(data);
});

Codepen demo https://codepen.io/jcubic/pen/VwjXNLE?editors=1010

the problem is that it don't work. It seems that what I need is in two examples but it don't show how to use them both. The problem is that timeseries example and category xaxis example all show one x axis and for all of them it show same points. In my case overtime I some shops may don't offer the product for prices I'm plotting.

The line plot in the example above work with 2d points but it require numbers and both categoryAxis and time series axis have only one X axis data and it require that all the data have same points on x axis.

So how can I 2D line plot with multiple lines? I'm fine with any library that this will work. I would like to have line plot with multiple color lines like in Billboard.js, but can't figure out how to use this library for my case.

Here is example in chart.js but it's not line chart because the lines in plot are squared.

the demo from the image is on Codpen: https://codepen.io/jcubic/pen/abNKLNJ?editors=0110

from How to create multi 2D line plot of prices over time