Download Core

Forecast highlight

Forecast points are dashed and shaded apart from actuals.

Chart type
Line line
Tier
Free Core
Collection
Highlight filter
Render
Live, site theme
View .md Agent setup
LIVE/highlight-filter/forecast-highlight10 of 23 in Highlight & filter

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: "line",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Demand",
      data: [99, 95, 93, 97, 97, 101, 99, 98, 98, 96, 94, 97, 99, 98, 96, 99, 100, 100, 99, 99, 96, 96, 94, 93]
    }
  ],
  forecastDataPoints: {
    count: 6,
    dashArray: 5,
    fillOpacity: 0.5
  },
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  annotations: {
    xaxis: [
      {
        x: "Jul",
        x2: "Dec",
        fillColor: "#7c3aed",
        opacity: 0.06,
        label: {
          text: "Forecast"
        }
      }
    ]
  },
  stroke: {
    width: 3,
    curve: "smooth"
  },
  title: {
    text: "Demand with 6-month forecast"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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