[Chartjs]-Chart.js ignore options

by

1👍

✅

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>

Leave a comment