diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss b/libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss index 5144a122d3..92d2a41063 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss @@ -16,15 +16,15 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2); .dt-stacked-series-chart-track-label-wrapper, .dt-stacked-series-chart-track-wrapper { position: relative; - min-height: $track-wrapper-height; - grid-row: 1; - grid-column: 2; } - .dt-stacked-series-chart-track-axis-container { + .dt-stacked-series-chart-track-axis-container, + .dt-stacked-series-chart-track-label-wrapper, + .dt-stacked-series-chart-track-wrapper { + min-height: $track-wrapper-height; + height: 100%; grid-column: 2; grid-row: 1; - height: $track-wrapper-height; } .dt-stacked-series-chart-container:not(.dt-stacked-series-chart-scale-point) { @@ -32,6 +32,9 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2); .dt-stacked-series-chart-track-wrapper { margin-top: $track-wrapper-margin-top; margin-bottom: $track-wrapper-margin-bottom; + height: calc( + 100% - #{$track-wrapper-margin-top} - #{$track-wrapper-margin-bottom} + ); } .dt-stacked-series-chart-track-axis-container { @@ -51,6 +54,7 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2); .dt-stacked-series-chart-track-label { @include fullWidthAxis(); + justify-content: center; } .dt-stacked-series-chart-track { @@ -65,11 +69,18 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2); .dt-stacked-series-chart-container { align-items: center; grid-template-columns: auto 1fr; + + &:not(.dt-stacked-series-chart-value-axis-none) { + grid-template-rows: 1fr auto; + } + + &.dt-stacked-series-chart-scale-point { + row-gap: calc(#{$gap} / 2); + } } .dt-stacked-series-chart-label-none.dt-stacked-series-chart-container { grid-template-columns: 1fr; - gap: 0; } /* TRACK */ @@ -79,9 +90,12 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2); grid-column: 2; } - .dt-stacked-series-chart-label-none .dt-stacked-series-chart-track-wrapper, - .dt-stacked-series-chart-label-none .dt-stacked-series-chart-value-axis { - grid-column: 1; + .dt-stacked-series-chart-label-none { + .dt-stacked-series-chart-track-axis-container, + .dt-stacked-series-chart-track-wrapper, + .dt-stacked-series-chart-value-axis { + grid-column: 1; + } } /* SLICE */ diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.html b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.html index 77144f42ee..9cb92ec422 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.html +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.html @@ -1,6 +1,7 @@
-
+
{{ tooltip.seriesOrigin.label }}