{"spec_id":"candlestick-volume","library":"echarts","language":"javascript","code":"// anyplot.ai\n// candlestick-volume: Stock Candlestick Chart with Volume\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-02\n\nconst t = window.ANYPLOT_TOKENS;\nconst UP_COLOR = t.palette[0]; // \"#009E73\" — profit/up (Imprint semantic exception)\nconst DOWN_COLOR = t.palette[4]; // \"#AE3030\" — loss/down (Imprint semantic exception)\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Tiny fixed-seed PRNG — the browser has no seeded Math.random().\nfunction mulberry32(seed) {\n  let a = seed;\n  return function () {\n    a |= 0;\n    a = (a + 0x6d2b79f5) | 0;\n    let x = Math.imul(a ^ (a >>> 15), 1 | a);\n    x = (x + Math.imul(x ^ (x >>> 7), 61 | x)) ^ x;\n    return ((x ^ (x >>> 14)) >>> 0) / 4294967296;\n  };\n}\nconst rand = mulberry32(42);\n\nconst dates = [];\nconst cursor = new Date(Date.UTC(2024, 0, 2));\nwhile (dates.length < 60) {\n  const weekday = cursor.getUTCDay();\n  if (weekday !== 0 && weekday !== 6) dates.push(cursor.toISOString().slice(0, 10));\n  cursor.setUTCDate(cursor.getUTCDate() + 1);\n}\n\nconst candles = [];\nconst volumes = [];\nlet price = 148;\nfor (let i = 0; i < dates.length; i++) {\n  const open = price;\n  const drift = (rand() - 0.47) * 3.2;\n  const close = Math.max(60, open + drift);\n  const high = Math.max(open, close) + rand() * 1.8;\n  const low = Math.min(open, close) - rand() * 1.8;\n  candles.push([open, close, low, high]);\n  const volume = Math.round(700000 + Math.abs(drift) * 350000 + rand() * 450000);\n  volumes.push({\n    value: volume,\n    itemStyle: { color: close >= open ? UP_COLOR : DOWN_COLOR },\n  });\n  price = close;\n}\n\nfunction formatVolume(v) {\n  return v >= 1e6 ? `${(v / 1e6).toFixed(1)}M` : `${Math.round(v / 1e3)}K`;\n}\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"Tech Stock 2024 · candlestick-volume · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 20,\n    textStyle: { color: t.ink, fontSize: 20, fontWeight: 500 },\n  },\n  tooltip: {\n    trigger: \"axis\",\n    axisPointer: { type: \"cross\" },\n  },\n  axisPointer: {\n    link: [{ xAxisIndex: \"all\" }],\n  },\n  grid: [\n    { left: 95, right: 60, top: 100, height: 460 },\n    { left: 95, right: 60, top: 620, height: 170 },\n  ],\n  xAxis: [\n    {\n      gridIndex: 0,\n      type: \"category\",\n      data: dates,\n      boundaryGap: true,\n      axisLabel: { show: false },\n      axisLine: { lineStyle: { color: t.inkSoft } },\n      axisTick: { show: false },\n      splitLine: { show: false },\n    },\n    {\n      gridIndex: 1,\n      type: \"category\",\n      data: dates,\n      boundaryGap: true,\n      axisLabel: { color: t.inkSoft, fontSize: 12, rotate: 45, interval: 6 },\n      axisLine: { lineStyle: { color: t.inkSoft } },\n      axisTick: { show: false },\n      splitLine: { show: false },\n    },\n  ],\n  yAxis: [\n    {\n      gridIndex: 0,\n      type: \"value\",\n      scale: true,\n      name: \"Price ($)\",\n      nameTextStyle: { color: t.inkSoft, fontSize: 13 },\n      axisLabel: { color: t.inkSoft, fontSize: 14, formatter: \"${value}\" },\n      axisLine: { show: false },\n      axisTick: { show: false },\n      splitLine: { lineStyle: { color: t.grid } },\n    },\n    {\n      gridIndex: 1,\n      type: \"value\",\n      name: \"Volume\",\n      nameTextStyle: { color: t.inkSoft, fontSize: 13 },\n      axisLabel: { color: t.inkSoft, fontSize: 14, formatter: formatVolume },\n      axisLine: { show: false },\n      axisTick: { show: false },\n      splitLine: { lineStyle: { color: t.grid } },\n    },\n  ],\n  series: [\n    {\n      type: \"candlestick\",\n      xAxisIndex: 0,\n      yAxisIndex: 0,\n      data: candles,\n      itemStyle: {\n        color: UP_COLOR,\n        color0: DOWN_COLOR,\n        borderColor: UP_COLOR,\n        borderColor0: DOWN_COLOR,\n      },\n    },\n    {\n      type: \"bar\",\n      xAxisIndex: 1,\n      yAxisIndex: 1,\n      data: volumes,\n      barWidth: \"70%\",\n    },\n  ],\n});\n"}