Chart.js General Data structures

Chart.js General data structure is the backbone of chat.js or any other charting library, with the help of data structures we can determine how data is organized, manipulated, and finally displayed in the chats.

Syntax:

const chartConfig = {
 type: 'chartType',
 data: {
 datasets: [{ data: [dataValues] }],
 labels: ['label1', 'label2']
 },
 options: { /* chart options */ }
};

Different Types of Data Structures:

• Primitive Array: This structure uses an array of numbers for data points, each corresponding to a label.
• Object Array: Here, each data point is an object specifying x and y values, allowing for complex chart types like scatter plots.
• Object Array using Custom Properties: This format uses an array of objects with custom properties, providing flexibility in data representation and parsing​

Dataset Configuration

• label: The label for the dataset which appears in the legend and tooltips.
• clip: Defines the clipping behavior for the chart area.
• order: Specifies the drawing order of datasets.
• stack: Configures stacking behavior for datasets in a bar or horizontal bar chart.
• parsing: Manages how data values are parsed.
• hidden: Controls the visibility of a dataset.

CDN link:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Example 1: In this example, we will using the primitive array type with Bar Chart, We will use the simple array of numbers for a bar chart.

Output:

👁 Screenshot-2023-12-04-045227

Example 2: This code creates an interactive line chart using Chart.js, displaying a dataset with points at specified x and y coordinates, enhanced with visual styling and a responsive legend.

Output:

👁 Screenshot-2023-12-04-050848