title: How to create multi 2D line plot of prices over time
body: <p>I'm trying to create plot using <a href="https://naver.github.io/billboard.js" rel="nofollow noreferrer">Billboard.js</a> that will show prices overtime from different shops.</p>
  <p>Here is my attempt:</p>
  <pre class="lang-js prettyprint-override"><code>dayjs.locale('pl');
  
  fetch('https://jcubic.pl/price.json')
    .then(res =&gt; res.json())
    .then(data =&gt; {
      var chart_data = {
          xs: {},
          columns: [],
          type: 'line'
      };
      Object.keys(data).map((shop, i) =&gt; {
          const date = `${shop}_date`;
          var prices = [shop];
          var dates = [date];
          data[shop].forEach(arr =&gt; {
              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: &quot;#chart&quot;,
          data: chart_data
      });
      //console.log(data);
  });
  </code></pre>
  <p>Codepen demo <a href="https://codepen.io/jcubic/pen/VwjXNLE?editors=1010" rel="nofollow noreferrer">https://codepen.io/jcubic/pen/VwjXNLE?editors=1010</a></p>
  <p>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.</p>
  <p>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.</p>
  <p>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.</p>
  <p>Here is example in chart.js but it's not line chart because the lines in plot are squared.</p>
  <p><a href="https://i.stack.imgur.com/NCI5w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NCI5w.png" alt="Line plot of prices over time" /></a></p>
  <p>the demo from the image is on Codpen: <a href="https://codepen.io/jcubic/pen/abNKLNJ?editors=0110" rel="nofollow noreferrer">https://codepen.io/jcubic/pen/abNKLNJ?editors=0110</a></p>