feat(series.show): Show/hide dataLabels per serie

.devcontainer/ui-lovelace.yaml

@@ -169,6 +169,8 @@ views:
                 group_by:
                   func: avg
                   duration: 1h
+                show:
+                  datalabels: true
           - type: sensor
             entity: sensor.humidity
             graph: line
@@ -198,15 +200,12 @@ views:
             graph_span: 24h
             span:
               start: day
-            apex_config:
-              dataLabels:
-                enabled: true
-                dropShadow:
-                  enabled: true
             series:
               - entity: sensor.random0_100
                 extend_to_end: false
                 type: column
+                show:
+                  datalabels: true
                 group_by:
                   func: avg
                   fill: 'null'
@@ -219,10 +218,6 @@ views:
             span:
               end: hour
             apex_config:
-              dataLabels:
-                enabled: true
-                dropShadow:
-                  enabled: true
               yaxis:
                 - title:
                     text: test1
@@ -245,18 +240,23 @@ views:
                   fill: 'last'
                 show:
                   legend_value: false
+                  datalabels: true
               - entity: sensor.random0_100
                 extend_to_end: false
                 type: column
                 group_by:
                   func: avg
                   fill: 'last'
+                show:
+                  datalabels: true
               - entity: sensor.random0_100
                 extend_to_end: false
                 type: column
                 group_by:
                   func: avg
                   fill: 'last'
+                show:
+                  datalabels: true
 
           - type: custom:apexcharts-card
             span:

README.md

@@ -165,6 +165,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `as_duration` | string | | v1.3.0 | Will pretty print the states as durations. Doesn't affect the graph, only the tooltip/legend/header display. You provide the source unit of your sensor. Valid values are `millisecond`, `second`, `minute`, `hour`, `day`, `week`, `month`, `year`.<br/>Eg: if the state is `345` and `as_duration` is set to `minute` then it would display `5h 45m` |
 | `in_header` | boolean | `true` | v1.4.0 | If `show_states` is enabled, this would show/hide this specific serie in the header |
 | `in_chart` | boolean | `true` | v1.4.0 | If `false`, hides the serie from the chart |
+| `datalabels` | boolean | `false` | NEXT_VERSION | If `true` will show the value of each point for this serie directly in the chart. Don't use it if you have a lot of points displayed, it will be a mess |
 
 
 ### Main `show` Options

src/apex-layouts.ts

@@ -38,6 +38,8 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
       },
     },
     dataLabels: {
+      enabled: true,
+      enabledOnSeries: getDataLabels_enabledOnSeries(config),
       formatter: getDataLabelsFormatter(config),
     },
     plotOptions: {
@@ -282,3 +284,9 @@ function getStrokeCurve(config: ChartCardConfig) {
     return [serie.curve || 'smooth'];
   });
 }
+
+function getDataLabels_enabledOnSeries(config: ChartCardConfig) {
+  return config.series_in_graph.flatMap((serie, index) => {
+    return serie.show.datalabels ? [index] : [];
+  });
+}

src/types-config-ti.ts

@@ -57,6 +57,7 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
     "legend_value": t.opt("boolean"),
     "in_header": t.opt("boolean"),
     "in_chart": t.opt("boolean"),
+    "datalabels": t.opt("boolean"),
   })),
   "group_by": t.opt(t.iface([], {
     "duration": t.opt("string"),

src/types-config.ts

@@ -53,6 +53,7 @@ export interface ChartCardSeriesExternalConfig {
     legend_value?: boolean;
     in_header?: boolean;
     in_chart?: boolean;
+    datalabels?: boolean;
   };
   group_by?: {
     duration?: string;

src/types.ts

@@ -28,6 +28,7 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
     legend_value: boolean;
     in_header: boolean;
     in_chart: boolean;
+    datalabels?: boolean;
   };
 }