Configuring Options in Tw-Elements Charts

[memiljamel]

Hello,

I am using the charts component from Tw-Elements and have found a way to initialize the chart using data attributes. Below is an example of the HTML code I am using:

<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
  <canvas
    data-twe-chart="line"
    data-twe-dataset-label="Traffic"
    data-twe-labels="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"
    data-twe-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]">
  </canvas>
</div>

For chart initialization, I am using:

import {
  Chart,
  initTWE,
} from "tw-elements/js/chart.es.min.js";

initTWE({ Chart });

However, I would like to know how to configure options, such as disabling the legend display with legend.display = false.

Is there a way to set these options using data attributes, or do I need to configure the options through JavaScript after initialization? If so, could you please provide an example of how to do that?

Thank you for your help!

[iprzybysz]

Hi @memiljamel , there is no data attribute available for this option. You need to configure it through JavaScript. Configure options object like below to disable the legend display:

const options = {
  plugins: {
    legend: {
      display: false,
    },
  },
};