czChart — Basic Examples

Line Chart LINE

Monthly revenue, cost & profit — smooth curves, 3 series

czChart.create('#chart-line', {
  type: 'line',
  data: [...],
  x: 'month',
  y: ['revenue', 'cost', 'profit'],
  series: { smooth: true, pointRadius: 3 }
});

Bar Chart BAR

Quarterly sales by region — tooltip aligned top

czChart.create('#chart-bar', {
  type: 'bar',
  data: [...],
  x: 'quarter',
  y: ['north', 'south', 'east'],
  tooltip: { align: 'top' } // right, left, top, bottom, auto
});

Area Chart AREA

Daily website traffic — 30 days, smooth gradient fill

czChart.create('#chart-area', {
  type: 'area',
  data: [...], // 30 data points
  x: 'date',
  y: ['pageviews', 'sessions'],
  series: { smooth: true }
});

Pie Chart PIE

Market share — hover to explode, click legend to toggle

czChart.create('#chart-pie', {
  type: 'pie',
  data: [...],
  x: 'browser',
  y: 'share'
});

Donut Chart DONUT

Expense breakdown — inner radius = 0.6

czChart.create('#chart-donut', {
  type: 'donut',
  data: [...],
  x: 'category',
  y: 'amount'
});

Scatter Plot SCATTER

Height vs Weight — 60 random points

czChart.create('#chart-scatter', {
  type: 'scatter',
  data: scatterData,
  x: 'height',
  y: 'weight'
});

Radar Chart RADAR

Skill comparison — multi-dataset overlay

czChart.create('#chart-radar', {
  type: 'radar',
  data: [...],
  x: 'skill',
  y: ['player_a', 'player_b']
});

Dark Theme THEME

Server response time (ms) — dark theme, area fill

czChart.create('#chart-dark', {
  type: 'line',
  theme: 'dark',
  data: [...],
  series: { smooth: true, fill: true, pointRadius: 4 }
});

Gauge Chart GAUGE NEW

Server CPU usage — semi-circle gauge with colored zones

czChart.create('#chart-gauge', {
  type: 'gauge',
  data: [{ label: 'CPU', value: 72 }],
  x: 'label', y: 'value',
  gauge: {
    min: 0, max: 100,
    zones: [
      { min: 0, max: 50, color: '#10b981' },
      { min: 50, max: 75, color: '#f59e0b' },
      { min: 75, max: 100, color: '#ef4444' }
    ]
  }
});

Horizontal Bar H-BAR NEW

Top programming languages — horizontal grouped bars

czChart.create('#chart-hbar', {
  type: 'horizontalBar',
  data: [...],
  x: 'language',
  y: ['popularity', 'jobs']
});

Candlestick OHLC NEW

Stock price OHLC data — 20 trading days

czChart.create('#chart-candle', {
  type: 'candlestick',
  data: ohlcData,
  x: 'date',
  y: 'ohlc'
});

Funnel Chart FUNNEL NEW

Sales pipeline conversion — top to bottom flow

czChart.create('#chart-funnel', {
  type: 'funnel',
  data: [...],
  x: 'stage',
  y: 'count'
});

Heatmap HEATMAP NEW

Baby temperature monitoring — hourly over 1 week (°C)

czChart.create('#chart-heatmap', {
  type: 'heatmap',
  data: [...],
  x: 'hour',
  y: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  heatmap: {
    colorScale: ['#3b82f6','#06b6d4','#10b981','#f59e0b','#ef4444']
  }
});

Waterfall Chart WATERFALL NEW

Revenue breakdown — cumulative positive/negative changes

czChart.create('#chart-waterfall', {
  type: 'waterfall',
  data: [...],
  x: 'item', y: 'amount'
});

Bubble Chart BUBBLE NEW

GDP vs Life Expectancy — bubble size = population

czChart.create('#chart-bubble', {
  type: 'bubble',
  data: [...],
  x: 'gdp', y: 'life_exp',
  bubble: { sizeKey: 'population' }
});

Treemap TREEMAP NEW

Market cap — proportional nested rectangles

czChart.create('#chart-treemap', {
  type: 'treemap',
  data: [...],
  x: 'sector', y: 'market_cap'
});

Box Plot BOXPLOT NEW

Test scores distribution — min, Q1, median, Q3, max per subject

czChart.create('#chart-boxplot', {
  type: 'boxplot',
  data: [...],
  x: 'subject',
  y: ['min','q1','median','q3','max']
});

Polar / Rose POLAR NEW

Team skills — radial bar sectors

czChart.create('#chart-polar', {
  type: 'polar',
  data: [...],
  x: 'skill', y: 'score'
});

Bar + Line + Area MIXED NEW

Revenue as bars, profit as line, growth as smooth area — includes negative values crossing zero

czChart.create('#chart-mixed1', {
  data: [...],
  x: 'month',
  y: ['revenue', 'profit', 'growth'],
  types: {
    revenue: 'bar',
    profit: 'line',
    growth: 'area-spline'
  }
});

Area vs Area-Spline MIXED NEW

Two datasets with different rendering styles — straight area vs smooth area-spline

// c3.js-style types config
czChart.create('#chart-mixed2', {
  data: [...],
  types: {
    data1: 'area',
    data2: 'area-spline'
  }
});

Grouped Bar + Spline Overlay MIXED NEW

Two bar datasets grouped side-by-side with a smooth spline trend line overlaid

czChart.create('#chart-mixed3', {
  data: [...],
  types: {
    online: 'bar',
    store: 'bar',
    total_trend: 'spline'
  }
});

CSV Data Source CSV

Load data from inline CSV string — auto-parsed

czChart.create('#chart-csv', {
  type: 'bar',
  data: "product,Q1,Q2,Q3,Q4\nLaptop,120,150,180,200\nPhone,200,180,220,260\nTablet,80,90,100,130"
});

📊 czChart — Examples