RomRider / apexcharts-card

📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant
MIT License
1.08k stars 75 forks source link

Option to remove legend/symbol for single series #672

Closed Aephir closed 2 months ago

Aephir commented 4 months ago

Checklist

Is your feature request related to a problem? Please describe. If you have many series, the part below with the series names/legend gets really crowded. Sometimes you don't want all of them shown.

For instance, I have this graph showing a mix of actual ("real") and forecast electricity prices:

Screenshot 2024-02-25 at 18 36 26
with this in the card. ``` type: custom:apexcharts-card header: show: true title: Electricity Price Overview show_states: false graph_span: 7d now: show: true color: red span: start: day series: - entity: sensor.electricity_price_total name: Total Today data_generator: | return entity.attributes.total_today.map((entry) => { return [new Date(entry.start), entry.value]; }); type: column color: '#07dbfc' show: legend_value: false in_header: false - entity: sensor.electricity_price_total name: Total Tomorrow data_generator: > if (entity.attributes.total_tomorrow && entity.attributes.total_tomorrow.length > 0) { return entity.attributes.total_tomorrow.map((entry) => { return [new Date(entry.start), entry.value]; }); } return []; type: column color: '#07dbfc' show: legend_value: false in_header: false - entity: sensor.energi_data_service name: Forecast data_generator: > const forecastData = entity.attributes.forecast.map((entry) => { return [new Date(entry.hour), entry.price]; }); const totalTomorrow = hass.states['sensor.electricity_price_total'].attributes.total_tomorrow; if (!totalTomorrow || totalTomorrow.length === 0) { return forecastData; } const tomorrowDate = new Date(); tomorrowDate.setDate(tomorrowDate.getDate() + 1); const tomorrowStr = tomorrowDate.toISOString().split('T')[0]; return forecastData.filter(([date]) => { return date.toISOString().split('T')[0] !== tomorrowStr; }); type: column color: '#fcbf07' show: legend_value: false in_header: false - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0 name: Raw Today data_generator: | return entity.attributes.raw_today.map((entry) => { return [new Date(entry.start), entry.value]; }); type: column color: '#a500a0' show: legend_value: false in_header: false - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0 name: Raw Tomorrow data_generator: > if (entity.attributes.raw_tomorrow && entity.attributes.raw_tomorrow.length > 0) { return entity.attributes.raw_tomorrow.map((entry) => { return [new Date(entry.start), entry.value]; }); } return []; type: column color: '#a500a0' show: legend_value: false in_header: false - entity: sensor.energi_data_service_raw name: Raw Forecast data_generator: > const forecastData = entity.attributes.forecast.map((entry) => { return [new Date(entry.hour), entry.price]; }); const rawTomorrow = hass.states['sensor.nordpool_kwh_dk2_dkk_3_095_0'].attributes.raw_tomorrow; if (!rawTomorrow || rawTomorrow.length === 0) { return forecastData; } const tomorrowDate = new Date(); tomorrowDate.setDate(tomorrowDate.getDate() + 1); const tomorrowStr = tomorrowDate.toISOString().split('T')[0]; return forecastData.filter(([date]) => { return date.toISOString().split('T')[0] !== tomorrowStr; }); type: column color: '#a50002' show: legend_value: false in_header: false yaxis: - min: 0 ```

The part that is "tomorrow" (between 26 Feb and 27 Feb on the graph above) will sometimes be populated from the attributes of sensor.electricity_price_total and sensor.nordpool_kwh_dk2_dkk_3_095_0 ("real" data), when this data is available (generally after 13:00), and sometimes from the attributes of sensor.energi_data_service and sensor.energi_data_service_raw ("forecast data").

I want all "real" data to have one color, and all "forecast" data to have another. However, I don't need both, e.g., "total today" and "total tomorrow" to be shown below the graph. I'd prefer just to change the name of "total today" to "real", and have one single blue dot with the text "real" and one orange dot with the text "forecasts" (and similar for the "Raw *").

This way, real data will always be shown in blue, forecast data always in orange, and I won't have two legends/symbols for the real data of the same color (meaning the legends will fit on one single line).

Describe the solution you'd like I would like to choose which series have their name/symbol/legend show beneath the graph. Maybe just an option under the show key, e.g.:

    show:
      legend: false

Describe alternatives you've considered I can't think of another way, but would be happy to be corrected.

Additional context Add any other context or screenshots about the feature request here.

github-actions[bot] commented 2 months ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

github-actions[bot] commented 2 months ago

This issue was closed because it has been stalled for 10 days with no activity.