Download Core

Area with negative values

Net cash flow that crosses zero, filled to the zero line.

Chart type
Area area
Tier
Free Core
Collection
Area
Render
Live, site theme
View .md Agent setup
LIVE/area/area-with-negative4 of 8 in Area

Open the chart without page chrome ↗

Configuration

Raw Standalone 
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "area",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Net cash k€",
      data: [12, 8, -4, -11, -6, 3, 14, 21, 9, -2, -9, 5]
    }
  ],
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  stroke: {
    curve: "smooth",
    width: 2
  },
  dataLabels: {
    enabled: false
  },
  title: {
    text: "Net cash flow"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()