ARTICLE AD BOX
The Problem I am using ECharts and I need the chart to take up the full width of the container. Therefore, I set grid.left and grid.right to 0. However, this causes the first and last labels on the x-axis to be truncated (cut off) because they overflow the container.
What I tried I tried to solve this by using xAxis.axisLabel.formatter with rich text styles. I added left padding to the last label and right padding to the first label to push them "inwards."
While this fixes the truncation, it introduces a new problem: The visual spacing between the first label and the second label becomes smaller than the rest. The same happens for the last label. It seems that modifying the label style via padding visually shifts the text, but doesn't adjust the calculated distribution logic, leading to uneven gaps.
My Question Is there a proper way to prevent the first and last x-axis labels from being cut off when grid: { left: 0, right: 0 }, without breaking the automatic equidistant spacing of the labels?
Minimal Reproducible Example Here is the configuration I am using:
// Generate simple mock data (Short enough to show all labels clearly) var dataX = ['09:30', '10:00', '10:30', '11:00', '11:30', '13:00', '14:00', '15:00']; var dataY = [120, 132, 101, 134, 90, 230, 210, 150]; return { // 1. Grid set to 0 to force chart to edges grid: { top: '10%', left: '0', // Force align left edge right: '0', // Force align right edge bottom: '15%', containLabel: false // MUST be false to reproduce the truncation issue }, xAxis: { type: 'category', data: dataX, boundaryGap: false, // Line starts exactly at the Y-axis axisTick: { show: false }, axisLine: { lineStyle: { color: '#E0E0E0' } }, axisLabel: { margin: 10, show: true, color: '#666', fontSize: 12, align: 'center', // Force show ALL labels to demonstrate the uneven spacing issue // interval: 0, // 2. The Formatter: Apply rich text styles only to first and last label formatter: function (value: any, index: any) { if (index === 0) { return '{start|' + value + '}'; } if (index === dataX.length - 1) { return '{end|' + value + '}'; } return value; }, // 3. The Workaround causing the issue: // Using padding to shift first/last labels inwards to prevent truncation. // PROBLEM: This visually shifts the text but messes up the equidistant spacing. rich: { start: { align: 'left', fontSize: 12, // Pushing the first label to the right (inwards) padding: [0, 0, 0, 30] }, end: { align: 'right', fontSize: 12, // Pushing the last label to the left (inwards) padding: [0, 30, 0, 0] } } } }, yAxis: { type: 'value', show: true, axisLine: { show: false }, axisLabel: { inside: true, // Labels inside the chart margin: 0, verticalAlign: 'bottom', color: '#999', fontSize: 10 }, splitLine: { show: true, lineStyle: { color: '#E0E0E0' } } }, series: [ { name: 'Value', type: 'line', data: dataY, symbol: 'none', // Hide dots for cleaner look lineStyle: { width: 1, color: '#F56C6C' } } ] };