TW-Elements icon indicating copy to clipboard operation
TW-Elements copied to clipboard

Configuring Options in Tw-Elements Charts

Open memiljamel opened this issue 4 months ago • 0 comments

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!

memiljamel avatar Oct 19 '24 08:10 memiljamel