- Chart.js Tutorial
- Chart.js - Home
- Chart.js - Introduction
- Chart.js - Installation
- Chart.js - Syntax
- Chart.js - Basics
- Chart.js - Color
- Chart.js - Options
- Chart.js - Interactions
- Chart.js - Legend
- Chart.js - Title
- Chart.js - Animation
- Chart.js - Tooltip
- Chart.js - Line Chart
- Chart.js - Bar Chart
- Chart.js - Radar Chart
- Chart.js - Doughnut Chart
- Chart.js - Pie Chart
- Chart.js - Polar Area Chart
- Chart.js - Bubble Chart
- Chart.js - Scatter Chart
- Chart.js - Mixed Chart
- Chart.js - Cartesian Axis
- Chart.js - Category Axis
- Chart.js - Radial Axis
- Chart.js Useful Resources
- Chart.js - Quick Guide
- Chart.js - Useful Resources
- Chart.js - Discussion
Chart.js - Category Axis
Axes are an integral part of any chart or graph. Like Cartesian axes, category axes are also an essential part of a chart.
The syntax of defining category axes globally is given below −
let chart = new Chart(ctx, { type: ... data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: ... } });
We can define category axes as a part of axis as follows −
let chart = new Chart(ctx, { type: ... data: ... options: { scales: { x: { type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] } } } });
Example
Let’s take an example in which we will use category axes for creating a chart −
<!DOCTYPE> <html> <head> <meta charset- "UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>chart.js</title> </head> <body> <canvas id="chartId" aria-label="chart" height="300" width="580"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script> <script> var chrt = document.getElementById("chartId").getContext("2d"); var chartId = new Chart(chrt, { type: 'bar', data: { labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"], datasets: [{ label: "online tutorial subjects", data: [20, 40, 30, 35, 30, 20], backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'], borderColor: ['black'], borderWidth: 1, pointRadius: 4, }], }, options: { responsive: false, scales: { x: { min: 'CSS', max: 'JQUERY' } } }, }); </script> </body> </html>
Output
Advertisements
To Continue Learning Please Login
Login with Google