Chart.js - Radial Time Axes

Radiant Time Axes in Chart.js are used to represent data over time in a radial or circular manner. Unlike traditional linear time axes, which display time along a horizontal or vertical axis, radial time axes visualize time data in a circular format, typically around a central point. Radial time axes are suitable for displaying cyclical or periodic data, such as hourly weather patterns, daily activity trends, or annual sales performance.

---

Importance of Radial Time Axes

Radiant time axes are important for the following reasons:

• Cyclical Data: Radial time axes are ideal for representing data that follows a cyclical or periodic pattern, such as daily, weekly, monthly, or yearly trends.
• 360-Degree Visualization: Radial time axes provide a 360-degree visualization of time data, allowing users to observe temporal patterns from different angles.
• Central Focus: Radial time axes typically have a central point of focus, making it easy to identify the starting point or reference time.

---

Configuration Options

Chart.js provides options for configuring radial time axes:

• Scale Type: Specifies 'radialLinear' as the scale type for the axis.
• Time Format: Defines the format for displaying time intervals or timestamps along the radial axis.
• Axis Range: Configures the range of time values displayed along the radial axis, including the minimum and maximum time values.

---

Examples

Let's explore examples of radial time axes in different types of radial charts:

1. Radial Line Chart with Time Axis

Creating a radial line chart with a time axis:

// JavaScript
var ctx1 = document.getElementById('radialTimeAxisLineChart').getContext('2d');
var radialTimeAxisLineChart = new Chart(ctx1, {
    type: 'line',
    data: {
        labels: ['6:00 AM', '9:00 AM', '12:00 PM', '3:00 PM', '6:00 PM', '9:00 PM', '12:00 AM'],
        datasets: [{
            label: 'Temperature',
            data: [20, 22, 24, 25, 23, 21, 19],
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            r: {
                type: 'radialLinear', // Scale type for radial axis
                angleLines: {
                    display: false // Hide angle lines for better visualization
                }
            }
        }
    }
});
  

2. Radial Bar Chart with Time Axis

Creating a radial bar chart with a time axis:

// JavaScript
var ctx2 = document.getElementById('radialTimeAxisBarChart').getContext('2d');
var radialTimeAxisBarChart = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [{
            label: 'Sales',
            data: [200, 300, 400, 350],
            backgroundColor: 'rgba(255, 99, 132, 0.6)'
        }]
    },
    options: {
        scales: {
            r: {
                type: 'radialLinear', // Scale type for radial axis
                angleLines: {
                    display: false // Hide angle lines for better visualization
                }
            }
        }
    }
});
  

---

Conclusion

Radiant time axes in Chart.js offer a unique way to visualize time-series data in a radial format. By configuring the radial axis type, time format, and range, developers can create insightful radial charts that effectively communicate cyclical trends and patterns over time.