Download Core

Dashed lines

Actual, plan and forecast lines with different dash patterns.

Chart type
Line line
Tier
Free Core
Collection
Line
Render
Live, site theme
View .md Agent setup
LIVE/line/dashed-line10 of 14 in Line

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: "Actual",
      data: [57, 60, 64, 66, 63, 67, 70, 67, 68, 64, 66, 68]
    },
    {
      name: "Plan",
      data: [64, 64, 65, 65, 67, 67, 67, 65, 65, 65, 63, 64]
    },
    {
      name: "Forecast",
      data: [60, 62, 62, 60, 61, 63, 61, 62, 59, 58, 56, 55]
    }
  ],
  stroke: {
    width: [3, 2, 2],
    dashArray: [0, 6, 2]
  },
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  title: {
    text: "Bookings vs plan (k)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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