Skip to content

Adding a curve to the dashboard

Sergey V. Sokolov edited this page Jan 11, 2026 · 6 revisions
  • Install apexcharts-card integration from HACS
  • Add an apexcharts-card to dashboard with the following configuration:
type: custom:apexcharts-card
chart_type: line
header:
  show: true
  title: Heating Curve
series:
  - entity: sensor.wda_sensor_graph
    type: line
    color: "#0AF"
    data_generator: |
      const points = Object.entries(entity.attributes.graph_data_map)
        .sort(([a], [b]) => parseFloat(a) - parseFloat(b))
        .map(([x, y]) => ({x:  `${x}`, y: y}));
      console.log(points);
      return points;
apex_config:
  xaxis:
    type: numeric
    tickAmount: 8
    title:
      text: Outdoor temperature (°C)
    labels:
      rotate: -90
      style:
        fontSize: 10px
  yaxis:
    tickAmount: 8
    title:
      text: Boiler Water temperature (°C)
  tooltip:
    x:
      formatter: function(value) { return value; }
  stroke:
    width: 2

Where wda_sensor_graph is the entity ID of the sensor containing the curve data. It has an related icon image.

Clone this wiki locally