Open In App

Chart.js General Data structures

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Bar Chart Example with Chart.js</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
</head>

<body>

    <canvas id="myChart"></canvas>

    <script>
        const cfg = {
            type: 'bar',
            data: {
                labels: ['a', 'b'], // Labels should be here
                datasets: [{
                    label: 'My First Dataset',
                    data: [20, 10],
                    backgroundColor: 
                          ['rgba(255, 99, 132, 0.2)', 
                         'rgba(54, 162, 235, 0.2)'],
                    borderColor: 
                          ['rgba(255, 99, 132, 1)', 
                         'rgba(54, 162, 235, 1)'],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        };

        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, cfg);
    </script>

</body>

</html>

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.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Enhanced Line Chart Example with Chart.js</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
</head>

<body>

    <canvas id="myLineChart"></canvas>

    <script>
        const cfg = {
            type: 'line',
            data: {
                datasets: [{
                    label: 'Sample Data',
                    data: 
                        [{ x: 10, y: 4 }, 
                         { x: 11, y: 8 }, 
                         { x: 11.5, y: 6 }, 
                         { x: 12, y: 14 }],
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    fill: false,
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom'
                    },
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        display: true
                    }
                }
            }
        };

        const ctx = 
              document.getElementById('myLineChart')
                  .getContext('2d');
        new Chart(ctx, cfg);
    </script>

</body>

</html>

Output:

Screenshot-2023-12-04-050848


Next Article
Chart.js General Fonts

I
iamgaurav
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox