Syntax
new Chart($("#ID"), {
type: 'doughnut'/'pie'
data: { ... },
options: { ... }
});
Example 1: In this example, we have implemented the Doughnut Chart that represents the data related to w3wiki course distribution. Each ring of the chart is been customized with a different color.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Courses Distribution</ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js" > </ script > </ head > < body > < div > < h1 style = "color:green;" > w3wiki </ h1 > < h3 >Chart JS Doughnut Chart </ h3 > < div > < canvas id = "coursesDoughnutChart" width = "700" height = "250" ></ canvas > </ div > </ div > < script > const coursesData = { labels: ['Python', 'JavaScript', 'Java', 'C++', 'Data Structures'], datasets: [{ data: [30, 20, 15, 10, 25], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4CAF50', '#9C27B0'], }], }; const config = { type: 'doughnut', data: coursesData, options: { plugins: { title: { display: true, text: 'w3wiki Courses Distribution', }, }, }, }; const ctx = document.getElementById( 'coursesDoughnutChart').getContext('2d'); new Chart(ctx, config); </ script > </ body > </ html > |
Output:
Example 2: In this example, we have implemented the Pie Chart, where we are representing the w3wiki Programming Language Usage visuals in the slices form. We have customized the slices with different colors.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Programming Languages Usage</ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js" > </ script > </ head > < body > < div > < h1 style = "color:green;" > w3wiki </ h1 > < h3 >Chart JS Pie Chart </ h3 > < div > < canvas id = "programmingLanguagesPieChart" width = "700" height = "250" ></ canvas > </ div > </ div > < script > const languagesData = { labels: ['Python', 'JavaScript', 'Java', 'C++', 'C#'], datasets: [{ data: [25, 20, 15, 10, 30], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4CAF50', '#9C27B0'], }], }; const config = { type: 'pie', data: languagesData, options: { plugins: { title: { display: true, text: 'w3wiki Programming Languages Usage', }, }, }, }; const ctx = document.getElementById( 'programmingLanguagesPieChart').getContext('2d'); new Chart(ctx, config); </ script > </ body > </ html > |
Output:
Contact Us