Unfortunately, customizing the name won’t remove the legend. You will get the min/max/mean next to the name no matter what you specify for the name even if you are only graphing the mean.
Why thank you 
haha
I couldn’t agree more. In an environment where I know exactly what is being displayed there’s no need to display the chart_type. Therefore it would be great if there was something like this:
type: statistics-graph
title: 'My Graph'
entities:
- entity: sensor.inside_temperature
name: Inside
hide_type: true <-------------------------------
3 Likes
+1
A hide function would be great. Such a beautiful graph, but with this messy legend is kind of useless in some cases.
1 Like
Yes please can you think about the possibilities of hide the labels and change color ? the graph otherway is very beautiful
Also, for a single entity (I have e.g. one graph for one room) it would be nice to hide it all together 
2 Likes
I found a way to hide the legends using this module:
and adding the following to the yaml for the statistics graph config:
style:
.: |
h1 {
padding-bottom: 0;
}
statistics-chart$ha-chart-base$: |
.chartLegend {
display: none;
}
A simple option would be a lot easier, but this is working for me in the meantime.
13 Likes
Great finding!
I hide the legend and show my own with the entities card. I think showing the current values of my entities is also a good thing.
In order to reduce my lengend’s size Im trying to reduce vertical space between entities and text size.
To mimic also the statistics card behaviour it would be nice hide/show the corresponding stat lines by clicking the entity.
Any clue about these two improvements?
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: sensor.ble_temperature_livingroom
name: Salon
icon: hass:circle
card_mod:
style: |
:host {
--card-mod-icon: mdi:circle;
--card-mod-icon-color: steelblue;
}
- entity: sensor.ble_temperature_bedroom
name: Habitacion
card_mod:
style: |
:host {
--card-mod-icon: mdi:circle;
--card-mod-icon-color: purple
}
- entity: sensor.ble_temperature_kidsroom
name: Niños
card_mod:
style: |
:host {
--card-mod-icon: mdi:circle;
--card-mod-icon-color: springgreen
}
title: Temperature
- type: statistics-graph
entities:
- entity: sensor.ble_temperature_livingroom
name: Salon
- entity: sensor.ble_temperature_bedroom
name: Habitacion
- entity: sensor.ble_temperature_kidsroom
name: Niños
days_to_show: 1
chart_type: line
stat_types:
- mean
- min
- max
style:
.: |
h1 {
padding-bottom: 0;
}
statistics-chart$ha-chart-base$: |
.chartLegend {
display: none;
}
5 Likes
But this hide all legends, not just the min/max
I’m not sure why but when I try this CSS approach I get
Key 'style' is not expected or not supported by the visual editor.
I don’t think that is an error. It just means you need to edit yaml/text mode.
You can hide just the min/max entries using something like:
style:
statistics-chart$ha-chart-base$: |
.chartLegend li[title*=max] {
display: none !important;
}
.chartLegend li[title*=min] {
display: none !important;
}
2 Likes
That is what i was looking for, now how to hide “(mean)” text?
Adding these two css styles to what @mejran wrote do the (hacky visual) trick:
.label {
text-overflow: "" !important;
}
.label::after {
content: "\00a0(mean)";
margin-right: -7em;
}
Anything more robust needs to be done in javascript or, even better, the card’s design.
-7em cuts of last 2 characters and replaces tem with ..., -6em does keep it, but ... is displayed instead for “(mean)”
text-overflow is probably still being overwritten by default
Update:
so far what I got
style:
statistics-chart$ha-chart-base$: |
.chartLegend li[title*=max] {
display: none !important;
}
.chartLegend li[title*=min] {
display: none !important;
}
.label {
text-overflow: clip !important;
}
.label::after {
content: "\00a0(mean)";
margin-right: -7em;
}
maybe one day i will understand the HA code enough to crate PR that will add that option
I guess the javascript injection would work same way as this GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card right?
1 Like
It is fine there are third party alternatives and CSS, but shouldn’t really be necessary for something as simple as customizing the legend a bit.
It does not align well with the intent of making HA easier to use.
I too like the statistics-graph, especially now that it has gotten the stat type ‘Change’. Nice.
But I would really like to see the possibility to adjust the legend.
As I see it there could be three options:
- Full (like now, could be default)
- Minimal (one legend entry per sensor, no matter how many stat types are selected, and without (mean))
- Off
If there is no space for it in the UI, just make it yaml only (like the entity name).
5 Likes
frontend/statistics-chart.ts at e14e27c01ab1725a132eb4ed33732b1902f25f75 · home-assistant/frontend · GitHub probably could be added here, but I did not still tried to follow instructions here Frontend development | Home Assistant Developer Docs and i developed kind of node.js alergy … mainly the later is the issue
there even already is hideLegend property that is not shown in visual editor.
Hi, I have used your CSS formatting and it works great on the PC, but on the phone it is not aligning properly. It is not matching the PC format, is it possible to have a CSS option that will match both PC & phone scaling? Please see attached picture.
Phone:
I think you would need to bother @piitaya directly to include switch to have visualization with mean max and min in chart, but not in the legend. Any css hackery like this will break in some use case on some change etc.
I kinda think there is some plan to make statistics/history or what is HA calling it (recorder vs non-recorder) work easier and plant might be they want to do nicer chart visualization components, so they do not spend time on improving current ones?
1 Like
As of the upcoming 2024.3, the statistics legend is reworked to only show one label per entity, and the text in the parenthesis is removed.
1 Like