Parsing Data

ApexCharts now supports (since v5.3.0) direct parsing and mapping of raw data objects, eliminating the need for manual data transformation. This feature is particularly useful for no-code applications, dashboards, and scenarios where you're working with external data sources.

Overview

The parsing feature allows you to:

• Map JSON object fields directly to chart axes
• Work with raw data without preprocessing
• Use the same data source for multiple chart types
• Easily switch between different field mappings

const rawData = [
  { productName: 'iPhone', salesAmount: 120, region: 'North' },
  { productName: 'Samsung', salesAmount: 100, region: 'South' }
];

const chart = new ApexCharts(element, {
  series: [{
    data: rawData,
    parsing: {
      x: 'productName',
      y: 'salesAmount'
    }
  }]
});

Nested Data

If your JSON objects are nested, you can use dot notation to map those fields. Example below

const rawData = [
    {
        product: {
            name: 'iPhone 15 Pro',
        },
        sales: {
            q1: {
                revenue: 125000,
            },
        },
       
    },
];

series: [{
    name: 'Q1 Revenue',
    data: rawData,
    parsing: {
        x: 'product.name',
        y: 'sales.q1.revenue'
    }
}]

Global Parsing Configuration

Set parsing rules that apply to all series by default:

const options = {
  parsing: {
    x: 'timestamp',
    y: 'value'
  },
  series: [{
    name: 'Series 1',
    data: rawData1
  }, {
    name: 'Series 2', 
    data: rawData2
  }]
};

Series-Level Parsing Configuration

Override global parsing for specific series:

const options = {
  parsing: {
    x: 'date'  // Global x field
  },
  series: [{
    name: 'Revenue',
    data: salesData,
    parsing: {
      y: 'revenue'  // Series-specific y field
    }
  }, {
    name: 'Profit',
    data: salesData,
    parsing: {
      y: 'profit'   // Different y field for this series
    }
  }]
};

Multi-Series with Different Data Sources

Each series can have its own data source and parsing configuration:

const options = {
  series: [{
    name: 'Website Traffic',
    data: webData,
    parsing: { x: 'date', y: 'visitors' }
  }, {
    name: 'Mobile App Usage',
    data: appData,
    parsing: { x: 'timestamp', y: 'activeUsers' }
  }]
};

CandleStick Chart Example

const stockData = [
  { 
    symbol: 'AAPL', 
    date: '2024-01-01',
    prices: { open: 180, high: 185, low: 178, close: 183 },
    volume: 50000000,
    metrics: { rsi: 65, sma: 182 }
  },
  { 
    symbol: 'AAPL', 
    date: '2024-01-02',
    prices: { open: 183, high: 187, low: 181, close: 186 },
    volume: 48000000,
    metrics: { rsi: 68, sma: 183 }
  }
];

// Candlestick chart with nested objects
const candlestickChart = new ApexCharts(element1, {
  series: [{
    name: 'AAPL Stock Price',
    data: stockData,
    parsing: {
      x: 'date',
      y: ['prices.open', 'prices.high', 'prices.low', 'prices.close']
    }
  }],
  chart: { type: 'candlestick' }
});

Bubble Chart Example

const companyData = [
  { 
    company: 'Apple', 
    financials: { revenue: 365, profit: 95 },
    market: { cap: 2800, employees: 147000 }
  },
  { 
    company: 'Microsoft', 
    financials: { revenue: 198, profit: 61 },
    market: { cap: 2400, employees: 181000 }
  },
];

// Method 1: Using explicit z field
const bubbleChart1 = new ApexCharts(element, {
  series: [{
    name: 'Company Performance',
    data: companyData,
    parsing: {
      x: 'financials.revenue',    // X: Revenue (billions)
      y: 'financials.profit',     // Y: Profit (billions)
      z: 'market.cap'             // Z: Market Cap (billions)
    }
  }],
  chart: { type: 'bubble' },
  xaxis: { title: { text: 'Revenue (Billions)' } },
  yaxis: { title: { text: 'Profit (Billions)' } }
});

// Method 2: Using array shorthand
const bubbleChart2 = new ApexCharts(element, {
  series: [{
    name: 'Revenue vs Employees',
    data: companyData,
    parsing: {
      x: 'company',
      y: ['financials.revenue', 'market.employees']  // [y-value, z-value]
    }
  }],
  chart: { type: 'bubble' }
});