Chart.js Scatter Chart
Chart.js Scatter Chart is a data visualization concept that allows users to represent and analyze the relationship between two numerical variables. Scatter charts use points or markers to represent the data points for showing the patterns, trends, and correlations. Mainly, the scatter chart can be used for exploring the distribution of data points and also to identify potential outliers in the data analysis process.
Scatter Chart Dataset Properties
There are some of the dataset properties that are mentioned below:
- data.datasets[index]: This property is used for a specific dataset at the given index in the scatter chart.
- options.datasets.scatter: This property is used for options that apply to all scatter datasets in the chart.
- options.elements.line: This property is used for options that affect tall line elements in a scatter chart.
- options.element.point: This property is used for options influencing all the point elements in the scatter chart.
- options: This is the global options property which is affecting the entire scatter chart.
Approach
- First, we will create the HTML structure by using the HTML <canvas> tag to show the desired chart.
- In the main part of the JavaScript code, we will initialize the object of the ChartJS by setting various properties like type = scatter, label, data, and many more options.
- Then, we will customize the scatter chart by feining various options of the scatter chart.
CDN link
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js”></script>
Syntax
new Chart($("#ID"), {
type: 'scatter'
data: { ... },
options: { ... }
});
Example 1: In this example, we have created a simple representation of a Scatter Chart using Chart.js. The chart mainly describes the visual form of data related to Visitors on w3wiki. On the horizontal axis, we have the months of the year and on the vertical axis, we have the visitors value per month.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Scatter Chart</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> </script> </head> <body> <div> <h2 style="color:green"> w3wiki </h2> <h5>Chart JS Scatter Chart 1</h5> <div> <canvas id="visitorsChart" width="700" height="300"></canvas> </div> </div> <script> const visitorsData = [ { x: 1, y: 500 }, { x: 2, y: 700 }, { x: 3, y: 1200 }, { x: 4, y: 900 }, { x: 5, y: 1500 }, ]; const config = { type: 'scatter', data: { datasets: [{ label: 'Visitors Data', data: visitorsData, backgroundColor: 'rgba(75, 192, 192, 0.7)', }], }, options: { scales: { x: { type: 'linear', position: 'bottom', title: { display: true, text: 'Months', }, }, y: { type: 'linear', position: 'left', title: { display: true, text: 'Number of Visitors', }, }, }, elements: { point: { radius: 8, hoverRadius: 10, }, }, plugins: { title: { display: true, text: 'w3wiki Monthly Visitors', }, }, }, }; const ctx = document.getElementById( 'visitorsChart').getContext('2d'); new Chart(ctx, config); </script> </body> </html> |
Output:
Example 2: In this example, we have created the Scatter Chart using Chart.js. The chart represents the Courses and Enrollment data related to w3wiki subjects. We have also customized the color of the scatter data point by applying some attractive styling options to it like hovering.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Scatter Chart</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> </script> </head> <body> <div> <h2 style="color:green;"> w3wiki </h2> <h5>Chart JS Scatter Chart 2</h5> <div> <canvas id="coursesChart" width="700" height="300"></canvas> </div> </div> <script> const coursesData = [ { x: 'Java', y: 150 }, { x: 'Python', y: 300 }, { x: 'JavaScript', y: 250 }, { x: 'C++', y: 200 }, { x: 'Data Structures', y: 180 }, ]; const config = { type: 'scatter', data: { datasets: [{ label: 'Courses Enrollment', data: coursesData, backgroundColor: 'rgba(255, 99, 132, 0.7)', }], }, options: { scales: { x: { type: 'category', position: 'bottom', title: { display: true, text: 'Courses', }, }, y: { type: 'linear', position: 'left', title: { display: true, text: 'Enrollment Count', }, }, }, elements: { point: { radius: 9, hoverRadius: 20, }, }, plugins: { title: { display: true, text: 'w3wiki Courses Enrollment', }, }, }, }; const ctx = document.getElementById( 'coursesChart').getContext('2d'); new Chart(ctx, config); </script> </body> </html> |
Output:
Contact Us