Candles on a category axis
Weekly candles labelled by week, no time gaps.
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "candlestick",
toolbar: {
show: false
}
},
series: [
{
name: "Weekly",
data: [
{
x: "W1",
y: [60, 61.1, 56.82, 57.86]
},
{
x: "W2",
y: [57.86, 59.06, 53.38, 54.54]
},
{
x: "W3",
y: [54.54, 57.48, 53.76, 57.18]
},
{
x: "W4",
y: [57.18, 58.75, 53.9, 54.07]
},
{
x: "W5",
y: [54.07, 54.48, 52.24, 52.98]
},
{
x: "W6",
y: [52.98, 53.59, 46.74, 47.73]
},
{
x: "W7",
y: [47.73, 48.4, 46.68, 46.76]
},
{
x: "W8",
y: [46.76, 53.11, 46.41, 51.64]
},
{
x: "W9",
y: [51.64, 53.09, 48.72, 49.16]
},
{
x: "W10",
y: [49.16, 49.47, 48.23, 48.93]
},
{
x: "W11",
y: [48.93, 55.27, 47.53, 54.33]
},
{
x: "W12",
y: [54.33, 59.15, 53.95, 58.56]
},
{
x: "W13",
y: [58.56, 59.62, 57.22, 58.75]
},
{
x: "W14",
y: [58.75, 62.36, 58.57, 61.53]
},
{
x: "W15",
y: [61.53, 62.6, 60.47, 60.5]
},
{
x: "W16",
y: [60.5, 63.68, 59.89, 62.28]
},
{
x: "W17",
y: [62.28, 66.37, 61.45, 65.67]
},
{
x: "W18",
y: [65.67, 66.2, 65.27, 66.16]
},
{
x: "W19",
y: [66.16, 67.16, 59.69, 61.06]
},
{
x: "W20",
y: [61.06, 61.14, 57.75, 58.35]
},
{
x: "W21",
y: [58.35, 59.75, 55.94, 57.38]
},
{
x: "W22",
y: [57.38, 58.63, 56.36, 56.61]
},
{
x: "W23",
y: [56.61, 57.76, 50.99, 52.1]
},
{
x: "W24",
y: [52.1, 52.69, 50.88, 52.62]
},
{
x: "W25",
y: [52.62, 54.14, 50.58, 50.73]
},
{
x: "W26",
y: [50.73, 51.36, 49.6, 49.66]
}
]
}
],
xaxis: {
type: "category",
tickAmount: 13
},
title: {
text: "Weekly candles"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "candlestick",
toolbar: {
show: false
}
},
series: [
{
name: "Weekly",
data: [
{
x: "W1",
y: [60, 61.1, 56.82, 57.86]
},
{
x: "W2",
y: [57.86, 59.06, 53.38, 54.54]
},
{
x: "W3",
y: [54.54, 57.48, 53.76, 57.18]
},
{
x: "W4",
y: [57.18, 58.75, 53.9, 54.07]
},
{
x: "W5",
y: [54.07, 54.48, 52.24, 52.98]
},
{
x: "W6",
y: [52.98, 53.59, 46.74, 47.73]
},
{
x: "W7",
y: [47.73, 48.4, 46.68, 46.76]
},
{
x: "W8",
y: [46.76, 53.11, 46.41, 51.64]
},
{
x: "W9",
y: [51.64, 53.09, 48.72, 49.16]
},
{
x: "W10",
y: [49.16, 49.47, 48.23, 48.93]
},
{
x: "W11",
y: [48.93, 55.27, 47.53, 54.33]
},
{
x: "W12",
y: [54.33, 59.15, 53.95, 58.56]
},
{
x: "W13",
y: [58.56, 59.62, 57.22, 58.75]
},
{
x: "W14",
y: [58.75, 62.36, 58.57, 61.53]
},
{
x: "W15",
y: [61.53, 62.6, 60.47, 60.5]
},
{
x: "W16",
y: [60.5, 63.68, 59.89, 62.28]
},
{
x: "W17",
y: [62.28, 66.37, 61.45, 65.67]
},
{
x: "W18",
y: [65.67, 66.2, 65.27, 66.16]
},
{
x: "W19",
y: [66.16, 67.16, 59.69, 61.06]
},
{
x: "W20",
y: [61.06, 61.14, 57.75, 58.35]
},
{
x: "W21",
y: [58.35, 59.75, 55.94, 57.38]
},
{
x: "W22",
y: [57.38, 58.63, 56.36, 56.61]
},
{
x: "W23",
y: [56.61, 57.76, 50.99, 52.1]
},
{
x: "W24",
y: [52.1, 52.69, 50.88, 52.62]
},
{
x: "W25",
y: [52.62, 54.14, 50.58, 50.73]
},
{
x: "W26",
y: [50.73, 51.36, 49.6, 49.66]
}
]
}
],
xaxis: {
type: "category",
tickAmount: 13
},
title: {
text: "Weekly candles"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render() Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export candlestick-candlestick-category.json --out candlestick-candlestick-category.svg --with-table Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/candlestick/candlestick-category/index.md …