Configuring Options in Tw-Elements Charts

Author: memiljamelCreated Oct 19, 2024Updated Oct 21, 2024

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!