Layout improvements for Graph module

[Mick605]

Improvement description

Current version: v3.1.0

I am currently working with the Graph module, and I am trying to display a graph so that the graph area covers most of the card. Here is the current layout of a Graph card, with an orange background to better visualize the graph area:

It seems there are some margins around the graph, inside the <svg> element that I cannot remove without using hackish solutions (negative margin, etc.). It looks like the svg viewbox is not calculated properly and instead is centered in the whole area, creating the top/bottom spacing.

My objective would be to have a look similar to the default HA Sensor card, which displays the chart in the whole card, but with the customizability from Ultra Card:

Here is a breakdown of all the improvements that would be great:

• display the SVG chart to cover the entire area instead of centering it (some kind of "full card" mode)
• for vertical axis, being able to display it as an overlay over the chart instead of being on the left of the chart
• for horizontal time axis, being able to display it as an overlay (same as above) + show vertical lines for each time label
• remove the black rectangle on the top left used to display the title if there is no title

Is it possible to implement these improvements ?

YAML of example card

type: custom:ultra-card
card_background: var(--card-background-color, var(--ha-card-background, white))
card_border_radius: 12
card_border_color: var(--divider-color)
card_border_width: 1
card_padding: 16
layout:
  rows:
    - id: row1
      columns:
        - id: col1
          modules:
            - id: graphs-1774906357681-zns6dwji3
              type: graphs
              data_source: history
              forecast_type: hourly
              forecast_entity: ""
              chart_type: line
              entities:
                - id: entity-1774906361023-i2gfcsft9
                  entity: sensor.my_sensor
                  name: ""
                  attribute: ""
                  color: "#2196F3"
                  show_points: true
                  fill_area: true
                  line_width: 2
                  line_style: solid
              time_period: 3h
              chart_width: 100%
              chart_width_percent: 100
              chart_height: 345
              show_title: false
              chart_alignment: center
              show_display_name: true
              show_entity_value: false
              info_position: top_left
              title_font_size: 12
              value_font_size: 16
              show_legend: false
              legend_position: bottom_left
              show_grid: true
              show_time_intervals: true
              smooth_curves: true
              show_tooltips: true
              show_slice_labels: true
              bar_display_limit: 0
              use_fixed_y_axis: true
              template_mode: false
              template: ""
              display_mode: always
              display_conditions: []
              y_axis_max: 50
              design: {}
              background_color: "#5c2500"

Thank you in advance