Axis

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 500,
  height: 300,
  data: [
    { id: 1, month: '03', sales: 200 },
    { id: 3, month: '04', sales: 300 },
    { id: 4, month: '05', sales: 400 },
    { id: 5, month: '06', sales: 500 },
    { id: 6, month: '07', sales: 600 },
    { id: 7, month: '08', sales: 700 },
  ],
  encode: { x: 'month', y: 'sales', color: 'month' },
  axis: {
    y: {
      title: 'Sales',
    },
    x: {
      title: 'Month',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`, // Label formatting
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { type: 'Revenue', value: 1234567.89 },
    { type: 'Expense', value: -987654.32 },
    { type: 'Profit', value: 246913.57 },
    { type: 'Investment', value: 5000000 },
  ],
  encode: { x: 'type', y: 'value', color: 'type' },
  axis: {
    y: {
      title: 'Amount (USD)',
      // Using d3-format string
      labelFormatter: ',.2s', // Thousands separator + 2 significant digits + SI prefix
    },
    x: {
      title: 'Business Type',
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 500,
  height: 500,
  data: [
    { id: 1, label: 'X Axis Label 1', value: 200 },
    { id: 3, label: 'X Axis Label 2', value: 300 },
    { id: 4, label: 'X Axis Label 3', value: 400 },
    { id: 5, label: 'X Axis Label 4', value: 500 },
    { id: 6, label: 'X Axis Label 5', value: 600 },
    { id: 7, label: 'X Axis Label 6', value: 700 },
    { id: 8, label: 'X Axis Label 999', value: 800 },
  ],
  encode: { x: 'label', y: 'value' },
  axis: {
    y: {
      title: 'Y Axis Title',
    },
    x: {
      title: 'X Axis Title',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`,
      transform: [
        // Ellipsis
        {
          type: 'ellipsis',
          suffix: '..', // Ellipsis suffix (default ...)
          minLength: 8, // No ellipsis if less than 8 characters
          maxLength: 12, // Force ellipsis if more than 12 characters
        },
        // Wrap
        {
          type: 'wrap',
          wordWrapWidth: 80, // Maximum line width 80px
          maxLines: 2, // Maximum 2 lines
          recoverWhenFailed: true, // Recover to default if wrapping fails
        },
        // Rotate
        {
          type: 'rotate',
          optionalAngles: [0, 45, 90], // Try rotating 0°, 45°, 90°
          recoverWhenFailed: true, // Recover to default angle if rotation fails
        },
        // Hide
        {
          type: 'hide',
          keepHeader: true, // Keep first label
          keepTail: true, // Keep last label
        },
      ],
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 500,
  height: 500,
  data: [
    { id: 1, label: 'X Axis Label 1', value: 200 },
    { id: 3, label: 'X Axis Label 2', value: 300 },
    { id: 4, label: 'X Axis Label 3', value: 400 },
    { id: 5, label: 'X Axis Label 4', value: 500 },
    { id: 6, label: 'X Axis Label 5', value: 600 },
    { id: 7, label: 'X Axis Label 6', value: 700 },
    { id: 8, label: 'X Axis Label 999', value: 800 },
  ],
  encode: { x: 'label', y: 'value' },
  axis: {
    y: {
      title: 'Y Axis Title',
    },
    x: {
      title: 'X Axis Title',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`,

      size: 100, // Must set size
      labelAutoEllipsis: {
        suffix: '..',
        minLength: 8,
        maxLength: 12,
      },
      labelAutoWrap: {
        wordWrapWidth: 80,
        maxLines: 2,
        recoverWhenFailed: true,
      },
      labelAutoRotate: {
        optionalAngles: [0, 45, 90], // Try rotating 0°, 45°, 90°
        recoverWhenFailed: true, // Recover to default angle if rotation fails
      },
      labelAutoHide: {
        keepHeader: true, // Keep first label
        keepTail: true, // Keep last label
      },
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { month: 'Jan', sales: 2000 },
    { month: 'Feb', sales: 1500 },
    { month: 'Mar', sales: 3000 },
    { month: 'Apr', sales: 2500 },
    { month: 'May', sales: 4000 },
    { month: 'Jun', sales: 3500 },
  ],
  encode: { x: 'month', y: 'sales', color: 'month' },
  axis: {
    y: {
      title: 'Sales (10k)',
      // Show basic grid lines
      grid: true,
      gridStroke: '#e6e6e6', // Grid line color
      gridLineWidth: 2, // Grid line width
      gridStrokeOpacity: 0.7, // Grid line opacity
      gridLineDash: [0, 0],
    },
    x: {
      title: 'Month',
      // X-axis usually doesn't need grid lines
      grid: false,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  width: 600,
  height: 400,
  data: [
    { time: '9:00', temperature: 18 },
    { time: '12:00', temperature: 24 },
    { time: '15:00', temperature: 28 },
    { time: '18:00', temperature: 22 },
    { time: '21:00', temperature: 20 },
  ],
  encode: { x: 'time', y: 'temperature' },
  style: { stroke: '#5B8FF9', lineWidth: 2 },
  axis: {
    y: {
      title: 'Temperature (°C)',
      grid: true,
      gridStroke: '#d9d9d9',
      gridLineDash: [4, 4], // Dash configuration: 4px solid, 4px gap
      gridStrokeOpacity: 0.8,
    },
    x: {
      title: 'Time',
      grid: true,
      gridStroke: '#f0f0f0',
      gridLineDash: [2, 2], // Finer dashes
      gridStrokeOpacity: 0.6,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { product: 'Product A', sales: 120 },
    { product: 'Product B', sales: 200 },
    { product: 'Product C', sales: 150 },
    { product: 'Product D', sales: 300 },
    { product: 'Product E', sales: 250 },
  ],
  encode: { x: 'product', y: 'sales', color: 'product' },
  axis: {
    y: {
      title: 'Sales (units)',
      grid: true,
      gridStroke: '#e8e8e8',
      gridLineWidth: 1,
      gridAreaFill: ['#fafafa', '#ffffff'], // Alternating fill colors
      gridOpacity: 0.9,
    },
    x: {
      title: 'Product Type',
      grid: false,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'area',
  width: 600,
  height: 400,
  data: [
    { quarter: 'Q1', revenue: 100, expense: 80 },
    { quarter: 'Q2', revenue: 120, expense: 90 },
    { quarter: 'Q3', revenue: 150, expense: 110 },
    { quarter: 'Q4', revenue: 180, expense: 140 },
  ],
  encode: { x: 'quarter', y: 'revenue' },
  style: { fillOpacity: 0.6 },
  axis: {
    y: {
      title: 'Amount (10k)',
      grid: true,
      gridStroke: '#cccccc',
      gridLineWidth: 1,
      // Show only even-indexed grid lines
      gridFilter: (datum, index) => index % 2 === 0,
      gridStrokeOpacity: 0.8,
    },
    x: {
      title: 'Quarter',
      grid: true,
      gridStroke: '#e6e6e6',
      gridLineDash: [3, 3],
      gridStrokeOpacity: 0.5,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval', // Set chart type to bar chart
  marginTop: 40, // Set chart top margin in pixels
  data: [
    { id: 1, label: 'X Axis Label 1', value: 200 },
    { id: 3, label: 'X Axis Label 2', value: 300 },
    { id: 4, label: 'X Axis Label 3', value: 400 },
    { id: 5, label: 'X Axis Label 4', value: 500 },
    { id: 6, label: 'X Axis Label 5', value: 600 },
    { id: 7, label: 'X Axis Label 6', value: 700 },
  ],
  // Set data encoding
  encode: { x: 'label', y: 'value' },
  axis: {
    // Configure x axis
    x: {
      position: 'bottom', // Set axis position

      // Axis title configuration
      title: 'X Axis Title', // Axis title content
      titleFontWeight: 500, // Title font weight
      titleSpacing: 15, // Distance from title to axis
      titlePosition: 'bottom', // Title position relative to axis
      titleFontSize: 14, // Title font size
      titleFill: '#333', // Title fill color

      // Grid line configuration
      grid: true, // Whether to show grid lines
      gridLineWidth: 2, // Grid line stroke width
      gridStroke: '#f0f0f0', // Grid line stroke color
      gridStrokeOpacity: 0.8, // Grid line stroke opacity
      gridLineDash: [3, 3], // Grid line stroke dash configuration
      gridOpacity: 0.9, // Grid line overall opacity
      gridAreaFill: ['#fafafa', '#ffffff'], // Grid area fill color
      gridFilter: (_, i) => i % 2 === 0, // Grid line filtering

      // Axis line configuration
      line: true, // Whether to show axis line
      lineLineWidth: 5, // Axis line stroke width
      lineStroke: '#f50', // Axis line stroke color
      arrow: true, // Whether to show arrow
      lineArrowOffset: 8, // Arrow offset length

      // Axis tick configuration
      tick: true, // Whether to show ticks
      tickCount: 8, // Set recommended number of ticks to generate
      tickLineWidth: 5, // Tick stroke width
      tickLength: 10, // Tick length
      tickStroke: '#3366ff', // Tick stroke color
      tickDirection: 'positive', // Tick direction
      tickStrokeOpacity: 0.8, // Tick stroke opacity

      // Axis label configuration
      label: true, // Whether to show tick labels
      labelFontSize: 12, // Label font size
      labelFill: '#009900', // Label fill color
      labelFontWeight: 500, // Label font weight
      labelFontFamily: 'Arial', // Label font family
      labelTextAlign: 'center', // Label text horizontal alignment
      labelTextBaseline: 'middle', // Label text vertical baseline
      labelAlign: 'horizontal', // Label alignment
      labelDirection: 'positive', // Label position relative to axis line
      labelSpacing: 5, // Spacing between label and its corresponding tick
      labelFillOpacity: 0.9, // Label fill opacity
      labelStroke: '#ffffff', // Label stroke color
      labelStrokeOpacity: 0.5, // Label stroke opacity
      labelLineWidth: 1, // Label stroke width
      labelOpacity: 1, // Label overall opacity
      labelDx: 2, // Label horizontal offset
      labelDy: 0, // Label vertical offset
      labelCursor: 'pointer', // Label cursor style
    },
    // Configure y axis
    y: {
      position: 'left', // Set axis position

      // Axis title configuration
      title: 'Y Axis Title', // Axis title content
      titleFontWeight: 500, // Title font weight
      titleSpacing: 20, // Distance from title to axis
      titlePosition: 'left', // Title position relative to axis
      titleFontSize: 14, // Title font size
      titleFill: '#333', // Title fill color

      // Grid line configuration
      grid: true, // Whether to show grid lines
      gridLineWidth: 2, // Grid line stroke width
      gridStroke: '#e6e6e6', // Grid line stroke color
      gridStrokeOpacity: 0.7, // Grid line stroke opacity
      gridLineDash: [5, 5], // Grid line stroke dash configuration
      gridOpacity: 0.8, // Grid line overall opacity

      // Axis line configuration
      line: true, // Whether to show axis line
      lineLineWidth: 5, // Axis line stroke width
      lineStroke: '#f50', // Axis line stroke color
      arrow: false, // Whether to show arrow
      lineOpacity: 1, // Axis line overall opacity

      // Axis tick configuration
      tick: true, // Whether to show ticks
      tickCount: 8, // Set recommended number of ticks to generate
      tickLineWidth: 5, // Tick stroke width
      tickLength: 10, // Tick length
      tickStroke: '#3366ff', // Tick stroke color
      tickDirection: 'negative', // Tick direction
      tickStrokeOpacity: 0.8, // Tick stroke opacity

      // Axis label configuration
      label: true, // Whether to show tick labels
      labelFontSize: 12, // Label font size
      labelFill: '#009900', // Label fill color
      labelFontWeight: 500, // Label font weight
      labelFontFamily: 'Helvetica', // Label font family
      labelTextAlign: 'right', // Label text horizontal alignment
      labelTextBaseline: 'middle', // Label text vertical baseline
      labelAlign: 'perpendicular', // Label alignment
      labelSpacing: 8, // Spacing between label and its corresponding tick
      labelLineHeight: 1.2, // Label line height
      labelFormatter: (d) => `${d}万`, // Label formatting
    },
  },
});

chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  width: 600,
  height: 400,
  data: [
    { date: '2024-01-01', price: 23.45, volume: 120000 },
    { date: '2024-01-02', price: 24.12, volume: 150000 },
    { date: '2024-01-03', price: 23.89, volume: 98000 },
    { date: '2024-01-04', price: 25.3, volume: 200000 },
    { date: '2024-01-05', price: 24.78, volume: 175000 },
    { date: '2024-01-08', price: 26.15, volume: 220000 },
  ],
  encode: { x: 'date', y: 'price' },
  style: { stroke: '#ff6b35', lineWidth: 2 },
  axis: {
    x: {
      title: 'Trading Date',
      // Time formatting requires custom function
      labelFormatter: (d) => {
        const date = new Date(d);
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${month}-${day}`;
      },
      labelFontSize: 11,
    },
    y: {
      title: 'Stock Price ($)',
      // Using d3-format: fixed 2 decimals
      labelFormatter: '.2f', // Equivalent to d.toFixed(2)
      grid: true,
      gridStroke: '#f5f5f5',
      tickCount: 6,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { category: 'Electronics', sales: 8500000 },
    { category: 'Clothing', sales: 12300000 },
    { category: 'Home & Garden', sales: 6800000 },
    { category: 'Beauty', sales: 15600000 },
    { category: 'Food & Beverage', sales: 9200000 },
  ],
  encode: { x: 'category', y: 'sales', color: 'category' },
  axis: {
    x: {
      title: 'Product Category',
      labelFontSize: 12,
    },
    y: {
      title: 'Sales',
      // Using d3-format: SI prefix format, automatic K/M units
      labelFormatter: '~s', // 8.5M, 12.3M, 6.8M, 15.6M, 9.2M
      grid: true,
      gridStroke: '#e8e8e8',
      tickCount: 5,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart2 = new Chart({
  container: 'container',
});

chart2.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { category: 'Electronics', sales: 8500000 },
    { category: 'Clothing', sales: 12300000 },
    { category: 'Home & Garden', sales: 6800000 },
    { category: 'Beauty', sales: 15600000 },
    { category: 'Food & Beverage', sales: 9200000 },
  ],
  encode: { x: 'category', y: 'sales', color: 'category' },
  axis: {
    x: {
      title: 'Product Category',
      labelFontSize: 12,
    },
    y: {
      title: 'Sales',
      // Custom localized unit format
      labelFormatter: (value) => {
        if (value >= 1000000) {
          return `${(value / 1000000).toFixed(1)}M`;
        } else if (value >= 1000) {
          return `${(value / 1000).toFixed(0)}K`;
        } else {
          return value.toString();
        }
      },
      grid: true,
      gridStroke: '#e8e8e8',
      tickCount: 5,
    },
  },
});
chart2.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'area',
  width: 600,
  height: 400,
  data: [
    { quarter: '2023 Q1', users: 125000 },
    { quarter: '2023 Q2', users: 158000 },
    { quarter: '2023 Q3', users: 234000 },
    { quarter: '2023 Q4', users: 312000 },
    { quarter: '2024 Q1', users: 425000 },
    { quarter: '2024 Q2', users: 586000 },
  ],
  encode: { x: 'quarter', y: 'users' },
  style: {
    fill: 'linear-gradient(270deg, #667eea 0%, #764ba2 100%)',
    fillOpacity: 0.6,
  },
  axis: {
    x: {
      title: 'Quarter',
      // Time string processing requires custom function
      labelFormatter: (d) => {
        return d.replace('2023 ', '').replace('2024 ', '24');
      },
      labelFontSize: 11,
    },
    y: {
      title: 'User Count',
      // Using d3-format: International standard K/M format
      labelFormatter: '.0s', // 125k, 158k, 234k, 312k, 425k, 586k
      grid: true,
      gridStroke: '#f0f0f0',
      gridLineDash: [3, 3],
      tickCount: 6,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 650, // Reduce width to trigger ellipsis
  data: [
    { product: 'iPhone 15 Pro Max', sales: 2500 },
    { product: 'Samsung Galaxy S24 Ultra 512GB Phantom Black Edition', sales: 1800 },
    {
      product: 'Apple MacBook Pro 16-inch M3 Max chip 1TB Space Gray',
      sales: 1200,
    },
    { product: 'Sony WH-1000XM5 Wireless Noise Canceling Headphones Midnight Black', sales: 3200 },
    { product: 'Xiaomi 14 Ultra Photography Kit 16GB+1TB White Limited Edition', sales: 2100 },
    { product: 'iPad Pro 12.9-inch M2 chip 1TB WiFi Space Gray', sales: 1600 },
    { product: 'MacBook Air 15-inch M2 chip 512GB Starlight', sales: 1400 },
    { product: 'AirPods Pro 2nd Generation Active Noise Cancellation Wireless Earbuds', sales: 2800 },
  ],
  encode: { x: 'product', y: 'sales', color: 'product' },
  axis: {
    x: {
      title: 'Bestselling Products',
      labelFontSize: 11,
      // Ellipsis solution: suitable for product name scenarios
      size: 100,
      transform: [
        {
          type: 'ellipsis',
          suffix: '...', // Ellipsis symbol
        },
      ],
    },
    y: {
      title: 'Sales (Units)',
      labelFormatter: ',.0f', // Thousands separator format
      grid: true,
      gridStroke: '#f0f0f0',
    },
  },
  tooltip: {
    // Show full product name on hover
    title: (d) => d.product,
    items: [{ field: 'sales', name: 'Sales', formatter: ',.0f' }],
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  width: 600, // Reduce width to trigger rotation
  marginBottom: 30, // Reserve space for rotation
  data: [
    { time: '2024-01-15 08:00', activeUsers: 1200 },
    { time: '2024-01-15 09:00', activeUsers: 1800 },
    { time: '2024-01-15 10:00', activeUsers: 2800 },
    { time: '2024-01-15 11:00', activeUsers: 3200 },
    { time: '2024-01-15 12:00', activeUsers: 4500 },
    { time: '2024-01-15 13:00', activeUsers: 4200 },
    { time: '2024-01-15 14:00', activeUsers: 3200 },
    { time: '2024-01-15 15:00', activeUsers: 3600 },
    { time: '2024-01-15 16:00', activeUsers: 3800 },
    { time: '2024-01-15 17:00', activeUsers: 4800 },
    { time: '2024-01-15 18:00', activeUsers: 5200 },
    { time: '2024-01-15 19:00', activeUsers: 4800 },
    { time: '2024-01-15 20:00', activeUsers: 4100 },
    { time: '2024-01-15 21:00', activeUsers: 3500 },
    { time: '2024-01-15 22:00', activeUsers: 2600 },
    { time: '2024-01-15 23:00', activeUsers: 1900 },
  ],
  encode: { x: 'time', y: 'activeUsers' },
  style: { stroke: '#5B8FF9', lineWidth: 2 },
  axis: {
    x: {
      title: 'Time',
      labelFontSize: 10,
      // Rotation solution: suitable for time labels
      size: 100,
      transform: [
        {
          type: 'rotate',
          optionalAngles: [0, 30, 45, 60, 90], // Try multiple angles
          recoverWhenFailed: true, // Recover to default angle when failed
        },
      ],
    },
    y: {
      title: 'Active Users',
      labelFormatter: ',.0f',
      grid: true,
      gridStroke: '#e6e6e6',
      gridLineDash: [3, 3],
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 800,
  data: [
    { department: 'Marketing Department', score: 85 },
    { department: 'Product Development Center', score: 92 },
    { department: 'Customer Service Department', score: 78 },
    { department: 'Human Resources Management', score: 81 },
    { department: 'Finance and Audit Department', score: 89 },
    { department: 'Strategic Planning Center', score: 87 },
  ],
  encode: { x: 'department', y: 'score', color: 'department' },
  axis: {
    x: {
      title: 'Department',
      labelFontSize: 12,
      // Wrap solution: suitable for department names
      size: 100,
      transform: [
        {
          type: 'wrap',
          wordWrapWidth: 80, // Maximum 80 pixels per line
          maxLines: 2, // Maximum 2 lines
          recoverWhenFailed: true, // Recover to default layout when wrap fails
        },
      ],
    },
    y: {
      title: 'Performance Score',
      grid: true,
      gridStroke: '#f5f5f5',
      domain: [0, 100],
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

// Generate mock stock data
const generateStockData = () => {
  const data = [];
  let price = 100;
  const startDate = new Date('2024-01-01');

  for (let i = 0; i < 90; i++) {
    // Increase to 90 data points
    const currentDate = new Date(startDate);
    currentDate.setDate(startDate.getDate() + i);

    // Random price fluctuation
    price += (Math.random() - 0.5) * 4;
    price = Math.max(80, Math.min(120, price)); // Limit to 80-120 range

    data.push({
      date: currentDate.toISOString().split('T')[0],
      price: Math.round(price * 100) / 100,
    });
  }
  return data;
};

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  width: 700, // Reduce width to increase density
  marginRight: 30, // Reserve space for keeping the last tick value
  data: generateStockData(),
  encode: { x: 'date', y: 'price' },
  style: { stroke: '#722ed1', lineWidth: 1.5 },
  axis: {
    x: {
      title: 'Trading Date',
      labelFontSize: 9,
      // Hide solution: suitable for dense data
      size: 100,
      transform: [
        {
          type: 'hide',
          keepHeader: true, // Keep first date
          keepTail: true, // Keep last date
        },
      ],
    },
    y: {
      title: 'Stock Price ($)',
      labelFormatter: '.2f',
      grid: true,
      gridStroke: '#f0f0f0',
      gridLineDash: [2, 2],
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 650, // Reduce width to trigger transformation effects
  marginBottom: 50, // Reserve space for multiple transformations
  marginRight: 100,
  data: [
    { region: 'Beijing Chaoyang CBD Core Financial Center', revenue: 8500 },
    { region: 'Shanghai Pudong Lujiazui Financial Trade Zone HQ Base', revenue: 9200 },
    { region: 'Shenzhen Nanshan High-tech Industrial Park', revenue: 7800 },
    { region: 'Guangzhou Tianhe Zhujiang New Town International Business Center', revenue: 6900 },
    { region: 'Hangzhou Xihu Internet Innovation Industrial Park', revenue: 5600 },
    { region: 'Chengdu High-tech Software Industrial Park Tech Innovation Zone', revenue: 4800 },
    { region: 'Suzhou Industrial Park Bio-Nano Science Park', revenue: 5200 },
    { region: 'Nanjing Jiangning Future Tech City Innovation Base', revenue: 4500 },
  ],
  encode: { x: 'region', y: 'revenue', color: 'region' },
  axis: {
    x: {
      title: 'Business Region',
      labelFontSize: 10,
      size: 100,
      // Quick configuration, equivalent to transform array
      labelAutoEllipsis: true, // Enable auto ellipsis
      labelAutoRotate: true, // Enable auto rotation
      labelAutoHide: true, // Enable auto hide
      labelAutoWrap: true, // Enable auto wrap
    },
    y: {
      title: 'Revenue (10K)',
      labelFormatter: ',.0f',
      grid: true,
      gridStroke: '#e8e8e8',
    },
  },
});
chart.render();