ECharts Axes, Labels, Grid Spacing, Styling, and Percentage Bars

1. Controlling gaps at the ends of an axis

When a category axis needs the plot to touch the axis edges, turn off axis padding.

const option = {
  xAxis: {
    type: 'category',
    boundaryGap: false // no gap at both ends; use true to leave padding
  },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [10, 20, 12, 18] }]
};

For a value axis, boundaryGap accepts a two-value array like [lower, upper], typical [0, 0] for bars/lines that should start at the origin.

2. Handling dense x-axis labels

• Force all labels to render and rotate to avoid overlap

const option = {
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    axisLabel: {
      interval: 0, // show every label
      rotate: 40   // tilt labels
    }
  },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [12, 9, 13, 15, 11, 16] }]
};

• Break long labels in to multiple lines

const option = {
  xAxis: {
    type: 'category',
    data: ['Alpha', 'Beta', 'Gamma', 'Delta'],
    axisLabel: {
      formatter: (txt) => txt.split('').join('\n') // vertical stack per character
    }
  },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [3, 8, 5, 7] }]
};

An alternative chunking approach keeps groups of characters per line:

function wrapEveryNChars(s, n = 4) {
  const parts = [];
  for (let i = 0; i < s.length; i += n) parts.push(s.slice(i, i + n));
  return parts.join('\n');
}

const option = {
  xAxis: {
    type: 'category',
    data: ['VeryLongLabel', 'AnotherLongLabel'],
    axisLabel: {
      formatter: (val) => wrapEveryNChars(val, 4)
    }
  },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [23, 41] }]
};

3. Preventing clipped y-axis tick labels

• Expand the plottign grid margins and keep labels with in it

const option = {
  grid: {
    left: 64,
    right: 20,
    top: 40,
    bottom: 30,
    containLabel: true // ensure axis labels are fully inside the grid
  },
  xAxis: { type: 'value' },
  yAxis: { type: 'category', data: ['A', 'B', 'C'] },
  series: [{ type: 'bar', data: [12, 25, 18] }]
};

Legacy margin keys still work in many setups:

const option = {
  grid: {
    x: 60,   // left gap
    y: 80,   // top gap
    x2: 12,  // right gap
    y2: 15   // bottom gap
  },
  xAxis: { type: 'value' },
  yAxis: { type: 'category', data: ['A', 'B', 'C'] },
  series: [{ type: 'bar', data: [12, 25, 18] }]
};

• Increase the label-to-axis distance for better readability

const option = {
  xAxis: { type: 'value' },
  yAxis: {
    type: 'value',
    axisLabel: {
      margin: 50 // space between tick labels and the axis line
    }
  },
  series: [{ type: 'line', data: [[0, 1], [1, 3], [2, 2]] }]
};

Common axisLabel options:

• show: toggle tick labels
• interval: show every Nth label or 0 for all
• inside: place labels inside the axis
• rotate: rotate text to avoid collisions
• formatter: customize label text
• color, fontSize, fontStyle, fontWeight, align, lineHeight, backgroundColor: text styling

4. Styling area, lines, and points

Configure colors for area fills, line strokes, and symbol points.

const option = {
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [120, 132, 101, 134, 90],
    areaStyle: { color: 'rgba(30, 90, 200, 0.25)' }, // filled area
    lineStyle: { color: '#1e5ac8', width: 2 },       // line color
    itemStyle: { color: '#1e5ac8' }                  // symbol color
  }]
};

5. Data labels on series

Use label for normal state and emphasis.label for highlighted state. Include positioning, rotation, offsets, and flexible formatting.

const option = {
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [23, 45, 38, 50],
    label: {
      show: true,
      position: 'top',           // e.g., 'left' | 'right' | 'inside' | [x, y]
      distance: 10,
      rotate: 0,
      offset: [0, -2],           // x/y pixel offset of label
      formatter: (params) => {
        const name = params.name;
        let wrapped = '';
        for (let i = 0; i < name.length; i++) {
          wrapped += name[i];
          if ((i + 1) % 4 === 0 && i < name.length - 1) wrapped += '\n';
        }
        return `${wrapped}: ${params.value}%`;
      },
      color: '#d23a3a',          // text style (also: fontSize, fontStyle, fontWeight, etc.)
    },
    emphasis: {
      label: {
        show: true,
        fontWeight: 'bold'
      }
    }
  }]
};

6. Highlight label styles (emphasis)

Increase visibility when an element is hovered or focused.

const option = {
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [10, 20, 30],
    label: { show: false },
    emphasis: {
      focus: 'series',
      label: { show: true, fontWeight: 'bold' }
    }
  }]
};

7. Label guide lines for pie-like charts

Configure the visual guide lines that connect labels to slices.

const option = {
  series: [{
    type: 'pie',
    radius: ['40%', '60%'],
    data: [
      { name: 'X', value: 30 },
      { name: 'Y', value: 20 },
      { name: 'Z', value: 50 }
    ],
    label: { show: true },
    labelLine: {
      show: true,
      length: 30,
      length2: 40,
      smooth: 0, // false or a number for smoothness
      lineStyle: { color: '#cc0000', width: 2, type: 'solid' }
    },
    emphasis: {
      labelLine: {
        show: true
      }
    }
  }]
};

8. Horizontal bars with percentage overlay against a 100% backrgound

Use two bars per category: a background bar at 100 and a foreground bar at the category percentage. Hide the value axis line and tick marks while leaving category labels visible.

const categories = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon'];
const values = [2.3, 64.2, 73.2, 63.4, 63.4];

const option = {
  grid: { left: 90, right: 30, top: 40, bottom: 30, containLabel: true },
  xAxis: {
    type: 'value',
    show: false,
    boundaryGap: [0, 0]
  },
  yAxis: {
    type: 'category',
    data: categories,
    axisLine: { show: false }, // keep text, hide the axis line
    axisTick: { show: false }
  },
  series: [
    // foreground percentage
    {
      type: 'bar',
      data: values,
      barWidth: 12,
      barMinHeight: 30,
      z: 10,
      itemStyle: {
        color: '#f57c00'
      },
      label: {
        show: true,
        position: 'right',
        formatter: '{c}%',
        color: '#222'
      },
      tooltip: { show: false }
    },
    // 100% background bar
    {
      type: 'bar',
      data: new Array(categories.length).fill(100),
      barWidth: 12,
      barGap: '-100%', // full overlap with foreground
      itemStyle: {
        color: '#e0e0e0'
      },
      label: { show: false },
      tooltip: { show: false }
    }
  ]
};

Adjust min/max on the value axis if you need fixed scaling; with boundaryGap set to [0, 0], bars start flush without extra padding.