ECharts Candlestick with Volume Panel — Free Linked-Chart Snippet

<div class="ecs-wrap">
  <div class="ecs-card">
    <div class="ecs-title">TICKER — Daily Candles</div>
    <div class="ecs-sub">Drag the bottom slider — the volume panel below zooms in sync</div>
    <div class="ecs-chart" id="ecsChart"></div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.ecs-wrap{width:100%;max-width:680px}
.ecs-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 1px 8px rgba(0,0,0,.07);border:1px solid #e2e8f0}
.ecs-title{font-size:13px;font-weight:700;color:#0f172a}
.ecs-sub{font-size:11.5px;color:#94a3b8;margin-top:3px;margin-bottom:6px}
.ecs-chart{width:100%;height:400px}

var el = document.getElementById('ecsChart');
var chart = echarts.init(el);

// Deterministic OHLC generator: each day's close becomes the next day's
// open-ish baseline plus a seeded wobble, which is what real prices do.
var days = [];
var ohlc = [];
var volumes = [];
var price = 148;
for (var i = 0; i < 60; i++) {
  var d = new Date(2026, 6, 1);
  d.setDate(d.getDate() + i);
  days.push((d.getMonth() + 1) + '/' + d.getDate());
  var wave = Math.sin(i / 5) * 3.2 + Math.sin(i / 1.7) * 1.4;
  var open = price;
  var close = Math.max(40, open + wave + (i % 7 === 0 ? 2.5 : -0.3));
  var high = Math.max(open, close) + Math.abs(Math.sin(i * 2.1)) * 1.6;
  var low = Math.min(open, close) - Math.abs(Math.cos(i * 1.3)) * 1.6;
  ohlc.push([Number(open.toFixed(2)), Number(close.toFixed(2)), Number(low.toFixed(2)), Number(high.toFixed(2))]);
  volumes.push(Math.round(400000 + Math.abs(wave) * 180000 + (i % 11 === 0 ? 300000 : 0)));
  price = close;
}

var UP = '#16a34a';
var DOWN = '#dc2626';

var option = {
  animation: false,
  axisPointer: { link: [{ xAxisIndex: 'all' }] },
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#0f172a',
    borderWidth: 0,
    textStyle: { color: '#fff', fontSize: 12 },
  },
  grid: [
    { left: 52, right: 20, top: 12, height: '58%' },
    { left: 52, right: 20, top: '68%', height: '18%' },
  ],
  xAxis: [
    { type: 'category', data: days, boundaryGap: true, axisLine: { lineStyle: { color: '#e2e8f0' } }, axisLabel: { show: false }, axisTick: { show: false } },
    { type: 'category', gridIndex: 1, data: days, boundaryGap: true, axisLine: { lineStyle: { color: '#e2e8f0' } }, axisLabel: { color: '#94a3b8', fontSize: 9 }, axisTick: { show: false } },
  ],
  yAxis: [
    { scale: true, axisLabel: { color: '#94a3b8', fontSize: 10, formatter: '${value}' }, splitLine: { lineStyle: { color: '#f1f5f9' } } },
    { gridIndex: 1, splitNumber: 2, axisLabel: { color: '#94a3b8', fontSize: 9, formatter: function (v) { return (v / 1e6).toFixed(1) + 'M'; } }, splitLine: { show: false } },
  ],
  dataZoom: [
    { type: 'inside', xAxisIndex: [0, 1], start: 55, end: 100 },
    { type: 'slider', xAxisIndex: [0, 1], start: 55, end: 100, bottom: 4, height: 18,
      borderColor: '#e2e8f0', fillerColor: 'rgba(99,102,241,.15)', handleStyle: { color: '#6366f1' }, textStyle: { color: '#94a3b8', fontSize: 9 } },
  ],
  series: [
    {
      type: 'candlestick',
      data: ohlc,
      itemStyle: { color: UP, color0: DOWN, borderColor: UP, borderColor0: DOWN },
    },
    {
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: volumes.map(function (v, i) { return { value: v, itemStyle: { color: ohlc[i][1] >= ohlc[i][0] ? UP : DOWN } }; }),
    },
  ],
};

chart.setOption(option);

var ro = new ResizeObserver(function () { chart.resize(); });
ro.observe(el);