Column with negatives
Monthly profit and loss, coloured by sign.
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "bar",
toolbar: {
show: false
}
},
series: [
{
name: "Result k€",
data: [23, -29, -29, -13, -20, 41, 39, -6, 10, -37, -22, 31, 30, 44, -18, -39, -14, -8]
}
],
xaxis: {
categories: ["Jan 25", "Feb 25", "Mar 25", "Apr 25", "May 25", "Jun 25", "Jul 25", "Aug 25", "Sep 25", "Oct 25", "Nov 25", "Dec 25", "Jan 26", "Feb 26", "Mar 26", "Apr 26", "May 26", "Jun 26"],
labels: {
rotate: -45
}
},
plotOptions: {
bar: {
colors: {
ranges: [
{
from: -1000,
to: -0.01,
color: "#e11d48"
},
{
from: 0,
to: 1000,
color: "#0d9488"
}
]
},
columnWidth: "78%"
}
},
dataLabels: {
enabled: false
},
title: {
text: "Monthly result"
},
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: "bar",
toolbar: {
show: false
}
},
series: [
{
name: "Result k€",
data: [23, -29, -29, -13, -20, 41, 39, -6, 10, -37, -22, 31, 30, 44, -18, -39, -14, -8]
}
],
xaxis: {
categories: ["Jan 25", "Feb 25", "Mar 25", "Apr 25", "May 25", "Jun 25", "Jul 25", "Aug 25", "Sep 25", "Oct 25", "Nov 25", "Dec 25", "Jan 26", "Feb 26", "Mar 26", "Apr 26", "May 26", "Jun 26"],
labels: {
rotate: -45
}
},
plotOptions: {
bar: {
colors: {
ranges: [
{
from: -1000,
to: -0.01,
color: "#e11d48"
},
{
from: 0,
to: 1000,
color: "#0d9488"
}
]
},
columnWidth: "78%"
}
},
dataLabels: {
enabled: false
},
title: {
text: "Monthly result"
},
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 column-column-with-negative.json --out column-column-with-negative.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/column/column-with-negative/index.md …