Download Core

Line with data labels

Two temperature lines with value labels and markers.

Chart type
Line line
Tier
Free Core
Collection
Line
Render
Live, site theme
View .md Agent setup
LIVE/line/line-with-data-labels2 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: "Lisbon",
      data: [15, 16, 18, 20, 23, 27, 29, 29, 27, 23, 19, 16]
    },
    {
      name: "Oslo",
      data: [-2, -1, 3, 8, 14, 18, 20, 19, 14, 8, 3, 0]
    }
  ],
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  dataLabels: {
    enabled: true
  },
  markers: {
    size: 4
  },
  yaxis: {
    title: {
      text: "°C",
      rotate: 0,
      style: {
        fontWeight: 600
      }
    }
  },
  title: {
    text: "Average high by month"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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