<baht-line-chart>

Multi-series line chart with a crosshair tooltip that lists every series at the hovered x. One y axis only — a second scale invents a correlation that is not in the data.

Cash flow, 12 months

<baht-line-chart format="currency"></baht-line-chart>

<script>
  const el = document.querySelector('baht-line-chart');
  el.categories = [
    "Oct",
    "Nov",
    "Dec",
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep"
  ];
  el.series = [
    {
      "name": "Income",
      "values": [
        42000,
        41500,
        46000,
        43000,
        44500,
        45200,
        44800,
        46100,
        45300,
        47000,
        45900,
        45200
      ]
    },
    {
      "name": "Expense",
      "values": [
        30500,
        33800,
        38200,
        31200,
        29900,
        32400,
        31800,
        33100,
        30900,
        34200,
        35600,
        31480
      ]
    }
  ];
</script>

Single series with an area wash and a dashed forecast

<baht-line-chart format="currency" area="true" forecast="1" baseline="0"></baht-line-chart>

<script>
  const el = document.querySelector('baht-line-chart');
  el.categories = [
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct"
  ];
  el.series = [
    {
      "name": "Net",
      "values": [
        11200,
        12900,
        14100,
        12600,
        10300,
        13720,
        14500
      ]
    }
  ];
</script>

Props

Name	Type	Default	Description
`series`JS	`ChartSeries[]`	`[]`	{ name, values, color? }[] — one entry per line
`categories`JS	`string[]`	`[]`	X labels, one per value index
`area`	`boolean`	`false`	10% wash under the line; single series only
`markers`JS	`ChartMarker[]`	`[]`	Reference lines (targets, averages)
`forecast`	`number`	`0`	Draw the last N points dashed
`baseline`	`number \| null`	`null`	Hairline at 0 or a target
`label-values`	`'ends' \| 'none'`	`'ends'`	ends labels the last point when labels do not collide
`label`	`string`	`''`	Accessible summary; falls back to a generated sentence.
`empty-message`	`string`	`'No data to chart'`	Shown when there is no series
`loading`	`boolean`	`false`	Hold the previous render at 0.5 opacity
`show-table`	`boolean`	`true`	Render the "View as table" twin
`format`	`ChartFormat`	`'number'`	number \| currency \| percent \| compact
`currency`	`string`	`'THB'`	ISO code; THB renders ฿