Mastering Chart.js: How to Elegantly Display Data with Drastically Different Scales Using Dual Y-Axes

## The Problem: When an Elephant Meets an Ant In data visualization, we often encounter a tricky problem: needing to display two or more datasets with vast scale differences on the same chart. For example, one dataset might be the **cumulative total number of videos** on a platform (potentially in the thousands or tens of thousands), while another is the **number of new videos added daily** (which could be in the single digits). What happens if you plot them on the same Y-axis?  As shown above, the large values of the cumulative total stretch the Y-axis scale. This causes the bar chart for daily new videos to be almost completely flattened against the X-axis, making it impossible to observe its trend. The developer's initial solution was to hide the large dataset by default, but this sacrifices the intuitive nature of data comparison and leads to a poor user experience. We at `wiki.lib00.com` believe there is a better way. --- ## The Best Practice: Using Dual Y-Axes The standard and most elegant solution for this problem in the data visualization world is the dual Y-axis. It allows us to define two independent Y-axes for a chart—one on the left and one on the right—each with its own scale. This way, small-scale and large-scale data can coexist peacefully, each clearly displaying its own trend. Implementing a dual Y-axis in Chart.js is straightforward and involves just two steps: ### Step 1: Define Two Y-Axes in `options.scales` We need to create separate configuration objects for the left and right axes. Here, we'll name the left axis `y-left` for new counts and the right axis `y-right-lib00` for total counts. **Key Configurations:** * `position`: `'left'` or `'right'` to specify the axis's location. * `grid.drawOnChartArea: false` (for the second axis): This prevents drawing a second set of grid lines over the chart area, keeping the visualization clean. * `title`: Add a title to each axis to help users understand the data. ```javascript // ... in chart options scales: { x: { /* ... x-axis config ... */ }, // Left Y-Axis - For small-scale data (e.g., daily new counts) 'y-left': { type: 'linear', position: 'left', grid: { color: gridColor, drawBorder: false }, ticks: { color: textColor }, title: { display: true, text: 'New Counts' } }, // Right Y-Axis - For large-scale data (e.g., cumulative totals) 'y-right-lib00': { type: 'linear', position: 'right', grid: { // Key: Avoid overlapping grid lines with the left axis for a cleaner chart drawOnChartArea: false, }, ticks: { color: textColor, callback: function(value) { if (value >= 1000) { return (value / 1000).toFixed(1) + 'K'; } return value; } }, title: { display: true, text: 'Cumulative/Total' } } } ``` ### Step 2: Assign Datasets to Their Corresponding Y-Axis In the `data.datasets` array, use the `yAxisID` property for each dataset to specify which Y-axis it should be associated with. ```javascript // ... in chart data datasets: [ // Line Chart - Total videos (bind to the right Y-axis) { type: 'line', label: 'Total Videos', data: data.map(d => d.total_videos), // ... other styles yAxisID: 'y-right-lib00', // Bind to the right Y-axis }, // Also bind Total PV, UV to the right Y-axis { type: 'line', label: 'Total Site PV', data: data.map(d => d.in_site_pv), yAxisID: 'y-right-lib00', // Bind to the right Y-axis }, // Bar Chart - New videos (bind to the left Y-axis) { type: 'bar', label: 'New Videos', data: data.map(d => d.new_videos), // ... other styles yAxisID: 'y-left' // Bind to the left Y-axis }, // Also bind published videos to the left Y-axis { type: 'bar', label: 'Published Videos', data: data.map(d => d.published_videos), yAxisID: 'y-left' // Bind to the left Y-axis } ] ``` After completing these two steps, your chart will be transformed. All data will be clearly visible, and you can intuitively compare trends across different scales. --- ## Alternative Solutions While the dual Y-axis is the preferred method, the following alternatives might be worth considering in specific scenarios: 1. **Logarithmic Scale**: Set the Y-axis `type` to `'logarithmic'`. This is very effective for displaying data with exponential growth but can be confusing for users unfamiliar with logarithmic scales, as it alters the visual proportions of the values. ```javascript scales: { y: { type: 'logarithmic' } } ``` 2. **Grouped Charts**: Split the data into two separate charts. This is a simple and clear solution if the datasets do not need to be precisely compared in the same view. 3. **Dynamic View Toggling**: Provide UI buttons that allow users to switch between a "Cumulative View" and an "Incremental View." This interactive approach is suitable for dashboards with limited space but sacrifices the ability to compare data simultaneously. --- ## Conclusion When faced with datasets of vastly different scales, the **dual Y-axis is undoubtedly the most powerful and user-friendly solution in Chart.js**. It not only solves the data visibility issue but also preserves the ability to perform multi-dimensional analysis within a single view. As demonstrated by the practical experience of DP@lib00, mastering this technique will significantly enhance the professional quality of your data visualizations.