title: Chartjs average line over bars
body: <p>I use <a href="https://www.chartjs.org/" rel="nofollow noreferrer">https://www.chartjs.org/</a>. In the example below I list values for every day for two weeks. For that I want a line of the average values for this period.</p>
  <p>Is it possible with chartjs and if so how?</p>
  <p><a href="https://i.stack.imgur.com/NKG34.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NKG34.png" alt="enter image description here" /></a></p>
  <p>I've started but it follows the bar locations and it should create a new path with fewer points.</p>
  <p><a href="https://i.stack.imgur.com/EgZhM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EgZhM.png" alt="Chartjs" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      var ctx = document.getElementById('canvas').getContext('2d');
      var mixedChart = new Chart(ctx, {
        type: 'bar',
        data: {
          datasets: [{
            label: 'Bar Dataset',
            data: [1, 2, 3, 1, 3, 4, 7, 2, 4, 3, 1, 6, 5, 2],
            backgroundColor: "#FF9881",
            order: 2
          }, {
            label: 'Line Dataset',
            data: [1, 2],
            type: 'line',
            borderColor: "#FF312D",
            fill: false,
            borderWidth: 1,
            order: 1
          }],
          labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
        },
        options: {
          "scales": {
            "yAxes": [{
              "ticks": {
                "beginAtZero": true
              }
            }]
          }
        }
      });
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>