score:1

Accepted answer

the options are in the wrong place,
they should be placed after the data object

  data: {
  },
  options: chartoptions

you had them as part of the data object...

  data: {
    options: chartoptions
  },

see following working snippet...

<canvas id="mychart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js"></script>
<script>
var ctx = document.getelementbyid('mychart').getcontext('2d');
let chartoptions = {
      responsive: true,
      layout: { padding: { top: 12, left: 12, bottom: 12 } },
      title: {
        display: true,
        text: 'chart.js line chart - cubic interpolation mode'
      },
      scales: {
        xaxes: [{ gridlines: { color: '#22364e', borderdash: [9, 7] } }],
        yaxes: [{ gridlines: { display: false } }]
      },
      plugins: { datalabels: { display: false } },
      legend: { display: false },
      elements: {
          point: { radius: 5 },
          line: { tension: 0.4, fill: false },
      },
      //tooltips: {},
      hover: { mode: 'nearest', animationduration: 400 },
    };
var mychart = new chart(ctx, {
      type: 'line',
      data: {
        labels: ["fri", "sun", "wed", "thu", "fri"],
        datasets: [
          {
            fill: false,
            bordercolor: '#6ebffe',
            pointbackgroundcolor: '#6ebffe',
            pointbordercolor: '#8cff00',
            data: [320, 325, 300, 350, 340],
          }
        ]
      },
      options: chartoptions
    });
</script>


Related Query

More Query from same tag