Core herunterladen

Säulen mit negativen Werten

Monatlicher Gewinn und Verlust, nach Vorzeichen eingefärbt.

Chart type
Bar bar
Tier
Kostenloser Core
Collection
Column
Zeichnen
Live im Website-Design
.md ansehen Agenten einrichten
LIVE/column/column-with-negative6 of 15 in Column

Diagramm ohne Website-Rahmen öffnen ↗

Configuration

Original Standalone 
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()