TW-Elements
TW-Elements copied to clipboard
Configuring Options in Tw-Elements Charts
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!