How to display just the limited part of data in chart.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Assuming you have an array of full data
let fullData = [15, 20, 30, 25, 35, 40, 45, 50, 55, 60];

// Define the number of data points you want to display
let displayDataLimit = 5;

// Slice the data array to get the limited data points
let limitedData = fullData.slice(0, displayDataLimit);

// Similarly, if you have corresponding labels for your data points
let fullLabels = ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8', 'Label 9', 'Label 10'];

// Slice the labels array to get the limited labels
let limitedLabels = fullLabels.slice(0, displayDataLimit);

// Set up your chart configuration and options
let chartConfig = {
  type: 'bar',
  data: {
    labels: limitedLabels,
    datasets: [{
      label: 'Limited Data',
      data: limitedData,
      backgroundColor: 'rgba(0, 123, 255, 0.8)',
    }]
  },
  options: {
    // ... other chart options
  }
};

// Create the chart instance
let myChart = new Chart(ctx, chartConfig);