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!
Source: mdbootstrap/TW-Elements