@designsystem-se/af 37.0.2 → 38.0.0

package/components/digi-bar-chart.js

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-a53686b3.js';
-import { o as ordinal, i as initRange, r as range, s as select, a as axisLeft, l as linear, b as axisBottom, p as polyInOut, c as interpolate, m as max, d as min, e as linear$1 } from './p-a47b6b5c.js';
+import { o as ordinal, i as initRange, r as range, s as select, a as axisLeft, l as linear, b as axisBottom, m as max, p as polyInOut, c as min, d as linear$1 } from './p-f9a1a787.js';
 import { _ as _t } from './p-903a27d9.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { B as BarChartVariation } from './p-dcdffb3c.js';
 import { d as defineCustomElement$8 } from './p-e8fc33ed.js';
-import { d as defineCustomElement$7 } from './p-583fae30.js';
-import { d as defineCustomElement$6 } from './p-965a52d4.js';
-import { d as defineCustomElement$5 } from './p-13770550.js';
-import { d as defineCustomElement$4 } from './p-789cf870.js';
-import { d as defineCustomElement$3 } from './p-93899a9e.js';
-import { d as defineCustomElement$2 } from './p-ab9c3e15.js';
+import { d as defineCustomElement$7 } from './p-01264cdd.js';
+import { d as defineCustomElement$6 } from './p-36b65cd5.js';
+import { d as defineCustomElement$5 } from './p-9e98bc1f.js';
+import { d as defineCustomElement$4 } from './p-b18e3596.js';
+import { d as defineCustomElement$3 } from './p-4b44f757.js';
+import { d as defineCustomElement$2 } from './p-a247bdd0.js';
 
 function band() {
   var scale = ordinal().unknown(undefined),
@@ -91,7 +91,7 @@ function band() {
   return initRange.apply(rescale(), arguments);
 }
 
-const barChartCss = ".sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{box-sizing:border-box;position:absolute;background-color:rgba(250, 250, 250, 0.98);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;font-size:0.875rem;display:none}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{--digi--icon--color:black;cursor:pointer;margin-top:-5px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar{height:10px;width:10px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-track,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-thumb,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
+const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0;--MARGIN--BODY:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
 const DigiBarChartStyle0 = barChartCss;
 
 const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
@@ -99,10 +99,14 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         super();
         this.__registerHost();
         // States
-        this._loading = false;
-        this._placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
-        this._dims = {};
-        this._margin = {
+        this.loading = false;
+        this.placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
+        // Width of data at each tick, if we have two data series that have values att same tick, this will be 2 for example. defaults to 1;
+        this.dataWidth = 1;
+        // Bar gap when using multiple bars for each point, this will be doubled, since it is applied on both bars
+        this.barGap = 0;
+        this.dims = {};
+        this.margin = {
             bottom: 0,
             top: 6,
             left: 5,
@@ -113,376 +117,279 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         this.yTickSize = 0;
         this.xTickSize = 5;
         // Width of the largets X-tick-value
-        this._tickWidth = 1;
+        this.tickWidth = 1;
         // Transition
         this.defaultDuration = 400;
         // Text and formats
         this.fontSize = '0.875rem';
+        this.colorPalettes = ['--digi--color--background--brand-primary', '--digi--color--infographic--brand--primary', '--digi--color--background--sentiment--beta--primary', '--digi--color--text--interactive--visited', '--digi--color--icon--validation--error'];
         // Observer for watching size changes when in line chart mode
         this.barChartObserver = new ResizeObserver((entries) => {
             entries.forEach(() => {
-                if (this._loading)
+                if (this.loading)
                     return this.loadingResize();
                 this.resize();
             });
         });
-        // Observer for watching size changes when in table mode
-        this.tableObserver = new ResizeObserver((entries) => {
-            entries.forEach(() => {
-                select(this._legendDiv).style('width', this._dims.width + 'px');
-                this.resizeTable();
+        this.highlightBars = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .attr('fill', (barData) => this.colorFunction(barData.serie))
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                var _a;
+                if (barData.serie === serie)
+                    return this.colorFunction(barData.serie);
+                else {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                        return 'url(#prognosisInactive)';
+                    }
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+                }
             });
-        });
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        this.resetBarColor = () => {
+            this.barChartContainer.selectAll('.bar').transition('color').duration(150).attr('fill', (barData) => this.colorFunction(barData.serie));
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
+            if (this.chartData.data.averageLine) {
+                this.barChartContainer.selectAll('.averageLine').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                    .style('filter', 'contrast(0.5)');
+                /*       this.barChartContainer.selectAll('.averageLineText').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                        .style('filter', 'contrast(0.5)'); */
+            }
+        };
+        this.highlightAverageLine = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                var _a;
+                if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                    return 'url(#prognosisInactive)';
+                }
+                else
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+            });
+            this.barChartContainer.selectAll('.averageLine').transition('avgLine')
+                .duration(150).style('mix-blend-mode', null).style('filter', null);
+            /*     this.barChartContainer.selectAll('.averageLineText').transition('avgLineText')
+                  .duration(150).style('mix-blend-mode', null).style('filter', null) */
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        // Sets and resizespositions the average line
+        this.averageLine = () => {
+            if (!this.chartData.data.averageLine)
+                return;
+            const avLineGroup = this.barChartContainer.select('.interactiveElements').selectAll('.averageLineGroup').data([this.chartData.data.averageLine]).join('g').attr('class', 'averageLineGroup');
+            /*     avLineGroup.selectAll('.averageLineText')
+                  .data(d => [d])
+                  .join('text')
+                  .attr('class', 'averageLineText')
+                  .text(d => d.text)
+                  .attr('x', this.xScale.range()[0])
+                  .attr('y', (d) => this.yScale(d.value))
+                  .attr('dy', -2)
+                  .attr('font-size', this.fontSize)
+                  .attr('fill', 'var(--digi--color--infographic--lineart)')
+                  .style('mix-blend-mode', 'plus-lighter')
+                  .style('filter', 'contrast(0.5)'); */
+            avLineGroup.selectAll('.averageLine')
+                .data(d => [d.value])
+                .join('line')
+                .attr('class', 'averageLine')
+                .attr('x1', this.xScale.range()[0])
+                .attr('y1', (d) => this.yScale(d))
+                .attr('x2', this.xScale.range()[1])
+                .attr('y2', (d) => this.yScale(d))
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '12, 7')
+                .attr('stroke-linecap', 'round')
+                .style('mix-blend-mode', 'plus-lighter')
+                .style('filter', 'contrast(0.5)')
+                .style('pointer-events', 'none');
+        };
         // Resizing chart while loading
         this.loadingResize = () => {
             const newHeight = this.setDims();
-            this.setMargins(true);
-            this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
-            this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-            this._margin.right =
-                this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+            this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
+            this.margin.right =
+                this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
                     this.yTickSize +
                     this.tickPadding;
             // If there is a new height
             if (newHeight) {
                 // Update y-axis with potentially new height (might want to do a check here)
                 this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.range([
-                        this._margin.top,
-                        this._dims.height - this._margin.bottom
+                    ? this.yScale.range([
+                        this.margin.top,
+                        this.dims.height - this.margin.bottom
                     ])
-                    : this._yScale.range([
-                        this._dims.height - this._margin.bottom,
-                        this._margin.top
+                    : this.yScale.range([
+                        this.dims.height - this.margin.bottom,
+                        this.margin.top
                     ]);
-                this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+                this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
             }
             // Update x-axis with new width
-            this._xScale.range([
+            this.xScale.range([
                 0,
-                this._dims.width - this._margin.right - this._margin.left
+                this.dims.width - this.margin.right - this.margin.left
             ]);
-            this._barSelection
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth());
             this.setValueTicks();
+            this.adjustBarSize();
+        };
+        this.highlightBarGroup = (_event, datum) => {
+            if (typeof datum === 'string') {
+                const barGroupID = '#' + this.barGroupID(datum);
+                this.barChartContainer.select(barGroupID).selectAll('.bar').transition('color')
+                    .duration(20)
+                    .attr('fill', (d) => {
+                    var _a;
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
+                });
+            }
+        };
+        this.unHighlightBarGroup = () => {
+            this.barSelection.selectAll('.bar').transition('color')
+                .duration(100)
+                .attr('fill', (d) => {
+                return this.colorFunction(d.serie);
+            });
         };
         // Adding click listener for tool tip text
         this.setTickInteraction = () => {
             if (this.afVariation === BarChartVariation.Horizontal) {
-                this._yAxisHandle
+                this.yAxisHandle
                     .selectAll('text')
                     .style('cursor', 'pointer')
                     .on('click', this.openTooltip)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut);
+                    .on('mouseenter', this.highlightBarGroup)
+                    .on('mouseleave', this.unHighlightBarGroup);
             }
             else {
-                this._xAxisHandle
+                this.xAxisHandle
                     .selectAll('text')
                     .style('cursor', 'pointer')
                     .on('click', this.openTooltip)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut);
+                    .on('mouseenter', this.highlightBarGroup)
+                    .on('mouseleave', this.unHighlightBarGroup);
             }
         };
         // Setting Y-scale
         this.setYScale = (empty) => {
             var _a, _b, _c;
             if (this.afVariation == BarChartVariation.Horizontal) {
-                this._yScale = band(empty
+                this.yScale = band(empty
                     ? ['0', '1', '2', '3', '4', '5', '6', '7']
-                    : this._chartData.data.xValueNames, [this._margin.top, this._dims.height - this._margin.bottom])
+                    : this.chartData.data.xValueNames, [this.margin.top, this.dims.height - this.margin.bottom])
                     .paddingOuter(0.1)
                     .paddingInner(0.1);
-                this._yAxis = axisLeft(this._yScale);
+                this.yAxis = axisLeft(this.yScale);
             }
             else {
-                this._yScale = linear()
-                    .domain(empty ? [0, 10] : [this._minVal, this._maxVal])
-                    .nice(((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.numberOfReferenceLines)
-                    ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.meta.numberOfReferenceLines
+                this.yScale = linear()
+                    .domain(empty ? [0, 10] : [this.minVal, this.maxVal])
+                    .nice(((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.numberOfReferenceLines)
+                    ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.meta.numberOfReferenceLines
                     : 3);
-                this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
+                this.yScale.range([
+                    this.dims.height - this.margin.bottom,
+                    this.margin.top
                 ]);
-                this._yAxis = axisLeft(this._yScale);
+                this.yAxis = axisLeft(this.yScale);
             }
         };
         // Setting X-Scale
         this.setXScale = (empty) => {
             // Horizontal
             if (this.afVariation == BarChartVariation.Horizontal) {
-                this._xScale = linear()
-                    .domain(empty ? [0, 10] : [this._minVal, this._maxVal])
+                this.xScale = linear()
+                    .domain(empty ? [0, 10] : [this.minVal, this.maxVal])
                     .nice(3);
-                this._margin.right =
-                    this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+                this.margin.right =
+                    this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
                         this.yTickSize +
                         this.tickPadding;
-                this._xScale.range([
+                this.xScale.range([
                     0,
-                    this._dims.width - this._margin.right - this._margin.left
+                    this.dims.width - this.margin.right - this.margin.left
                 ]);
                 // Initializing actual axis
-                this._xAxis = axisBottom(this._xScale);
-                this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
+                this.xAxis = axisBottom(this.xScale);
+                this.tickWidth = this.getLargestText(this.xScale.ticks().map((tick) => tick.toLocaleString()));
             }
             else {
                 // Vertical
-                this._xScale = band()
-                    .domain(empty ? this._placeholderTicks : this._chartData.data.xValueNames)
-                    .range([0, this._dims.width - this._margin.right - this._margin.left])
+                this.xScale = band()
+                    .domain(empty ? this.placeholderTicks : this.chartData.data.xValueNames)
+                    .range([0, this.dims.width - this.margin.right - this.margin.left])
                     .paddingOuter(0.1)
                     .paddingInner(0.1);
-                this._xAxis = axisBottom(this._xScale);
+                this.xAxis = axisBottom(this.xScale);
             }
         };
         // Stores all tick text sizes in an indexable array
         this.tickSizes = () => {
             // Initializing tick size array
-            this._namedTickSizes = [];
-            this._ellipsisSize = this.getTextSize('...');
-            if (this._chartData && this._chartData.data) {
-                for (let i = 0; i < this._chartData.data.xValueNames.length; i++) {
-                    this._namedTickSizes.push(Math.ceil(this.getTextSize(this._chartData.data.xValueNames[i])));
+            this.namedTickSizes = [];
+            this.ellipsisSize = this.getTextSize('...');
+            if (this.chartData && this.chartData.data) {
+                for (let i = 0; i < this.chartData.data.xValueNames.length; i++) {
+                    this.namedTickSizes.push(Math.ceil(this.getTextSize(this.chartData.data.xValueNames[i])));
                 }
             }
         };
-        this.updateBars = (fromLoading) => {
-            this._barChartContainer
+        this.barGroupID = (key) => {
+            return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
+        };
+        this.updateBars = () => {
+            this.barSelection = this.barChartContainer.select('.interactiveElements')
                 .selectAll('.barGroup')
-                .data(this.reshapeData)
-                .join((enter) => {
-                var _a, _b;
-                const tempSelection = enter
-                    .append('g')
-                    .attr('class', 'barGroup')
-                    .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'));
-                tempSelection
-                    .append('rect')
-                    .attr('class', 'bar')
-                    .style('cursor', 'pointer')
-                    .attr('ry', 4)
-                    .attr('rx', 4)
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key)
-                    : this._dims.height - this._margin.bottom)
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? 2
-                    : this._xScale(d.key))
-                    .attr('width', () => this.afVariation === BarChartVariation.Horizontal
-                    ? 0
-                    : this._xScale.bandwidth())
-                    .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.bandwidth()
-                    : 0)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut)
-                    .on('click', this.openTooltip)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(polyInOut)
-                    .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._xScale(d.value)
-                    : this._xScale.bandwidth())
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key)
-                    : this._yScale(d.value))
-                    .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.bandwidth()
-                    : this._dims.height -
-                        this._margin.bottom -
-                        this._yScale(d.value))
-                    .attr('fill', '#00005a');
-                if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
-                    return tempSelection;
-                tempSelection
-                    .append('text')
-                    .text((d) => d.value.toLocaleString())
-                    .attr('class', 'barText')
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('text-anchor', 'end')
-                    .style('pointer-events', 'none')
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-                    : this._dims.height - this._margin.bottom)
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? 2
-                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(polyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._xScale(d.value)
-                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-                    : this._yScale(d.value))
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'middle';
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === BarChartVariation.Horizontal)
-                        return this._xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'black';
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this._numberFormat));
-                });
-                return tempSelection;
-            }, (update) => {
-                // Update ids to bars
-                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'));
-                // Mouse interaction to updated loading bars
-                if (fromLoading) {
-                    update
-                        .select('rect')
-                        .on('mouseenter', this.hover)
-                        .on('mouseleave', this.hoverOut)
-                        .on('click', this.openTooltip)
-                        .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? 2
-                        : this._xScale(d.key))
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._dims.height - this._margin.bottom)
-                        .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._xScale(d.value)
-                        : this._xScale.bandwidth())
-                        .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
-                        : 0)
-                        .attr('fill', '#00005a')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(polyInOut)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._yScale(d.value))
-                        .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
-                        : this._dims.height -
-                            this._margin.bottom -
-                            this._yScale(d.value))
-                        .on('end', () => this.barChartObserver.observe(this._chartDiv)); // Reset barchartObserver
-                }
-                else {
-                    update
-                        .select('rect')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(polyInOut)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._yScale(d.value))
-                        .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? 2
-                        : this._xScale(d.key))
-                        .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._xScale(d.value)
-                        : this._xScale.bandwidth())
-                        .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
-                        : this._dims.height -
-                            this._margin.bottom -
-                            this._yScale(d.value))
-                        .attr('fill', '#00005a');
-                }
-                return update
-                    .select('text')
-                    .style('display', () => { var _a, _b; return ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(polyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-                    : this._yScale(d.value))
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._xScale(d.value)
-                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'middle';
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === BarChartVariation.Horizontal)
-                        return this._xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'black';
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this._numberFormat));
-                });
-            }, (exit) => exit.remove());
-            this._barSelection = this._barChartContainer.selectAll('rect');
-            this._textSelection = this._barChartContainer.selectAll('.barText');
+                .data(this.mappedData)
+                .join('g')
+                .attr('class', 'barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('.bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
+                .attr('class', 'bar')
+                .style('cursor', 'pointer')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('ry', 4)
+                .attr('rx', 4)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction)
+                .attr('fill', (d) => this.colorFunction(d.serie))
+                .on('mouseenter', this.hover)
+                .on('mouseleave', this.hoverOut)
+                .on('click', this.openTooltip);
+            this.barSelection = this.barChartContainer.selectAll('.barGroup');
+            this.textSelection = this.barChartContainer.selectAll('.barText');
         };
         // Setting position of text according to bar size
         this.adjustBarText = () => {
             var _a, _b;
-            if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
+            if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
                 return;
-            this._textSelection
+            this.textSelection
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-                : this._yScale(d.value))
+                ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                : this.yScale(d.value))
                 .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                ? this.xScale(d.value)
+                : this.xScale(d.key) + this.xScale.bandwidth() / 2)
                 .attr('dx', (d) => {
                 if (this.afVariation === BarChartVariation.Horizontal)
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
                         ? this.tickPadding
                         : -this.tickPadding;
                 return 0;
@@ -490,151 +397,207 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 .attr('fill', (d) => {
                 if (this.afVariation === BarChartVariation.Vertical)
                     return 'black';
-                return this._xScale(d.value) < d.len + this.tickPadding * 2
+                return this.xScale(d.value) < d.len + this.tickPadding * 2
                     ? 'black'
                     : 'white';
             })
                 .attr('text-anchor', (d) => {
                 if (this.afVariation === BarChartVariation.Vertical)
                     return 'middle';
-                return this._xScale(d.value) < d.len + this.tickPadding * 2
+                return this.xScale(d.value) < d.len + this.tickPadding * 2
                     ? 'start'
                     : 'end';
             });
         };
         this.reshapeData = () => {
             const toReturn = [];
-            if (this._loading) {
-                this._placeholderTicks.forEach((key) => {
-                    toReturn.push({
+            if (!this.chartData) {
+                this.placeholderTicks.forEach((key) => {
+                    const tick = { key: key, series: [] };
+                    tick.series.push({
                         key: key,
+                        serie: 'loading',
                         value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
-                        len: '1'
+                        len: 0
                     });
+                    toReturn.push(tick);
                 });
                 return toReturn;
             }
-            this._chartData.data.xValueNames.forEach((key, index) => {
-                toReturn.push({
-                    key: key,
-                    value: this._chartData.data.series[0].yValues[index],
-                    len: this.getTextSize(this._chartData.data.series[0].yValues[index].toLocaleString())
-                });
-            });
+            else {
+                if (this.chartData.data.xValueNames) {
+                    this.chartData.data.xValueNames.forEach((key, index) => {
+                        const tick = { key: key, series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key,
+                                    serie: serie.title,
+                                    value: serie.yValues[index],
+                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                });
+                            }
+                        });
+                        toReturn.push(tick);
+                    });
+                }
+                else {
+                    this.chartData.data.xValues.forEach((key, index) => {
+                        const tick = { key: key.toString(), series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key.toString(),
+                                    serie: serie.title,
+                                    value: serie.yValues[index],
+                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                });
+                            }
+                        });
+                        toReturn.push(tick);
+                    });
+                }
+            }
             return toReturn;
         };
         this.adjustBarSize = () => {
-            this._barSelection
-                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._yScale(d.value))
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth())
-                .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.bandwidth()
-                : this._dims.height - this._margin.bottom - this._yScale(d.value));
+            this.barSelection.selectAll('.bar')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction);
+        };
+        this.evalColorVar = (colorVar) => {
+            return getComputedStyle(document.documentElement)
+                .getPropertyValue(colorVar)
+                .trim()
+                .toLocaleLowerCase();
         };
-        // Resize table
-        this.resizeTable = () => {
-            this.setDims();
-            this.setTableDimensions();
+        // Handling x positioning of bars
+        this.xFunction = (d, i) => {
+            return this.afVariation === BarChartVariation.Horizontal
+                ? (d.value > 0 ? this.xScale(0) : this.xScale(d.value))
+                : this.xScale(d.key) + ((this.xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
+        };
+        // Handling y positioning of bars
+        this.yFunction = (d, i) => {
+            if (!d.value)
+                return 0;
+            return this.afVariation === BarChartVariation.Horizontal
+                ? this.yScale(d.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
+                : (d.value < 0 ? this.yScale(0) : this.yScale(d.value));
+        };
+        // Handling height for bars
+        this.heightFunction = (d) => {
+            if (!d.value)
+                return 0;
+            return this.afVariation === BarChartVariation.Horizontal
+                ? this.yScale.bandwidth() / this.dataWidth - (this.barGap)
+                : (d.value < 0 ? this.yScale(d.value) - this.yScale(0) : this.yScale(0) - this.yScale(d.value));
+        };
+        // Handling width for bars
+        this.widthFunction = (d) => {
+            return this.afVariation === BarChartVariation.Horizontal
+                ? Math.abs(this.xScale(0) - this.xScale(d.value))
+                : this.xScale.bandwidth() / this.dataWidth - (this.barGap);
         };
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
             // Get title dimensions
-            const tempTitle = select(this._titleDiv).node().getBoundingClientRect(), tempLegend = select(this._legendDiv).node().getBoundingClientRect();
-            const prevHeight = this._dims.height;
+            const tempTitle = select(this.titleDiv).node().getBoundingClientRect(), tempLegend = select(this.legendDiv).node().getBoundingClientRect();
+            const prevHeight = this.dims.height;
             if (!onlyHeight)
-                this._dims = select(this._chartDiv).node().getBoundingClientRect();
-            this._dims.height =
-                this._maxHeight - tempLegend.height - tempTitle.height - 1.75 * this._rem;
-            return prevHeight != this._dims.height;
+                this.dims = select(this.chartDiv).node().getBoundingClientRect();
+            this.dims.height =
+                this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
+            // Making sure height and width are defined
+            this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
+            this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
+            return prevHeight !== this.dims.height;
         };
         // Setting margins given text size
         this.setMargins = (fromLoading) => {
             var _a;
-            this._pixelSize =
+            this.pixelSize =
                 Number(window
                     .getComputedStyle(document.body)
                     .getPropertyValue('font-size')
                     .match(/\d+/)[0]) * Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g, ''));
             // Getting the longest word, assuming it will also be the widest in terms of pixels
             if (this.afVariation === BarChartVariation.Horizontal) {
-                const left = ((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.data) &&
-                    this.getLargestText(this._chartData.data.xValueNames)
-                    ? this.getLargestText(this._chartData.data.xValueNames)
+                const left = ((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.data) &&
+                    this.getLargestText(this.chartData.data.xValueNames)
+                    ? this.getLargestText(this.chartData.data.xValueNames)
                     : 0;
-                this._margin.left = left;
+                this.margin.left = left;
+                this.margin.bottom = this.pixelSize + this.tickPadding + this.xTickSize;
             }
-            else
-                this._margin.left = this.getLargestText(fromLoading
+            else {
+                this.margin.left = this.getLargestText(fromLoading
                     ? ['0', '10']
                     : [
-                        this._minVal ? this._tempScale[0].toLocaleString() : '0',
-                        this._maxVal ? this._tempScale[1].toLocaleString() : '10'
+                        this.minVal ? this.tempScale[0].toLocaleString() : '0',
+                        this.maxVal ? this.tempScale[1].toLocaleString() : '10'
                     ]);
-            if (this._margin.left > this._dims.width / 4) {
-                this._margin.left = Math.floor(this._dims.width / 4);
-                this._margin.ellipsis = true;
+                this.margin.bottom = this.pixelSize;
+            }
+            if (this.margin.left > this.dims.width / 4) {
+                this.margin.left = Math.floor(this.dims.width / 4);
+                this.margin.ellipsis = true;
             }
             else
-                this._margin.ellipsis = false;
-            this._margin.bottom = this._pixelSize + this.tickPadding + this.xTickSize;
+                this.margin.ellipsis = false;
         };
         // Adjusting y-ticks
         this.setNamedTicks = (transition = false) => {
             if (this.afVariation == BarChartVariation.Horizontal) {
                 if (!transition) {
-                    this._yAxisHandle
+                    this.yAxisHandle
                         .style('font-size', this.fontSize)
                         .style('font-family', 'Open Sans')
-                        .call(this._yAxis
+                        .call(this.yAxis
                         .tickPadding(this.tickPadding)
                         .tickSize(this.yTickSize)
                         .tickSizeOuter(0)
                         .tickFormat((d, i) => {
-                        if (!this._margin.ellipsis)
+                        if (!this.margin.ellipsis)
                             return d.toLocaleString();
                         // Adding ellipsis to text
-                        const size = this._namedTickSizes[i] + this.tickPadding + this.yTickSize;
-                        const mSize = this._margin.left;
+                        const size = this.namedTickSizes[i] + this.tickPadding + this.yTickSize;
+                        const mSize = this.margin.left;
                         if (size < mSize)
                             return d.toLocaleString();
-                        const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)) + '...');
+                        const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this.ellipsisSize)) * d.length), 3)) + '...');
                         let adjustment = 0;
                         if (newSize > mSize) {
                             adjustment = Math.ceil((newSize - mSize) / (size / d.length));
                         }
                         // Slicing the text up, saving atleast 3 characters
                         return (d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .slice(0, Math.max(Math.floor((mSize / (size + this.ellipsisSize)) * d.length) - adjustment, 3))
                             .trim() + '...');
                     }));
                 }
                 else {
-                    this._yAxisHandle
+                    this.yAxisHandle
                         .style('font-size', this.fontSize)
                         .style('font-family', 'Open Sans')
                         .transition()
                         .duration(this.defaultDuration)
-                        .call(this._yAxis
+                        .call(this.yAxis
                         .tickPadding(this.tickPadding)
                         .tickSize(this.yTickSize)
                         .tickSizeOuter(0)
                         .tickFormat((d, i) => {
-                        if (!this._margin.ellipsis)
+                        if (!this.margin.ellipsis)
                             return d;
                         // Adding ellipsis to text
-                        const size = this._namedTickSizes[i] + this.tickPadding + this.yTickSize;
-                        const mSize = this._margin.left;
+                        const size = this.namedTickSizes[i] + this.tickPadding + this.yTickSize;
+                        const mSize = this.margin.left;
                         if (size < mSize)
                             return d;
                         const newSize = this.getTextSize(d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3))
+                            .slice(0, Math.max(Math.floor((mSize / (size + this.ellipsisSize)) * d.length), 3))
                             .trim() + '...');
                         let adjustment = 0;
                         if (newSize > mSize) {
@@ -642,26 +605,26 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                         }
                         // Slicing the text up, saving atleast 3 characters
                         return (d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .slice(0, Math.max(Math.floor((mSize / (size + this.ellipsisSize)) * d.length) - adjustment, 3))
                             .trim() + '...');
                     }));
                 }
             }
             else {
                 //Calculating every n:th text to show
-                let nTh = Math.round(this._chartData.data.xValues.length /
-                    ((this._dims.width - this._margin.left - this._margin.right) / 90 - 1));
-                if (Math.floor(this._chartData.data.xValues.length / nTh) < 4) {
-                    nTh = Math.round(this._chartData.data.xValues.length / 4);
+                let nTh = Math.max(Math.round(this.chartData.data.xValues.length /
+                    ((this.dims.width - this.margin.left - this.margin.right) / 90 - 1)), 1);
+                if (Math.floor(this.chartData.data.xValues.length / nTh) < 4) {
+                    nTh = Math.round(this.chartData.data.xValues.length / 4);
                 }
-                const allowedWidth = (this._dims.width - this._margin.left - this._margin.right) /
-                    Math.floor(this._chartData.data.xValues.length / nTh + 1);
+                const allowedWidth = (this.dims.width - this.margin.left - this.margin.right) /
+                    Math.floor(this.chartData.data.xValues.length / nTh + 1);
                 if (!transition) {
-                    this._xAxisHandle
+                    this.xAxisHandle
                         .style('font-size', this.fontSize)
                         .style('font-family', 'Open Sans')
-                        .call(this._xAxis
-                        .tickValues(this._xScale.domain().filter((...[, i]) => {
+                        .call(this.xAxis
+                        .tickValues(this.xScale.domain().filter((...[, i]) => {
                         if (i == 0)
                             return true;
                         else {
@@ -673,23 +636,23 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                         .tickSizeOuter(0)
                         .tickFormat((d, i) => {
                         const index = i * nTh;
-                        if (this._namedTickSizes[index] < allowedWidth)
+                        if (this.namedTickSizes[index] < allowedWidth)
                             return d;
                         return (d.slice(0, Math.max(Math.floor((allowedWidth /
-                            (this._namedTickSizes[index] +
-                                this._ellipsisSize +
+                            (this.namedTickSizes[index] +
+                                this.ellipsisSize +
                                 5)) *
                             d.length), 3)) + '...');
                     }));
                 }
                 else {
-                    this._xAxisHandle
+                    this.xAxisHandle
                         .style('font-size', this.fontSize)
                         .style('font-family', 'Open Sans')
                         .transition()
                         .duration(this.defaultDuration)
-                        .call(this._xAxis
-                        .tickValues(this._xScale.domain().filter((...[, i]) => {
+                        .call(this.xAxis
+                        .tickValues(this.xScale.domain().filter((...[, i]) => {
                         if (i == 0)
                             return true;
                         else {
@@ -701,11 +664,11 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                         .tickSizeOuter(0)
                         .tickFormat((d, i) => {
                         const index = i * nTh;
-                        if (this._namedTickSizes[index] < allowedWidth)
+                        if (this.namedTickSizes[index] < allowedWidth)
                             return d;
                         return (d.slice(0, Math.max(Math.floor((allowedWidth /
-                            (this._namedTickSizes[index] +
-                                this._ellipsisSize +
+                            (this.namedTickSizes[index] +
+                                this.ellipsisSize +
                                 5)) *
                             d.length), 3)) + '...');
                     }));
@@ -715,30 +678,30 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         // Positioning the ticks of the value bearing axis
         this.setValueTicks = (transition = false) => {
             var _a, _b;
-            if (((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) && ((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.meta.hideXAxis)) {
+            if (((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) && ((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.meta.hideXAxis)) {
                 this.afVariation === BarChartVariation.Horizontal
-                    ? this._xAxisHandle.attr('display', 'none')
-                    : this._yAxisHandle.attr('display', 'none');
+                    ? this.xAxisHandle.attr('display', 'none')
+                    : this.yAxisHandle.attr('display', 'none');
                 return;
             }
             let toCall, tickSize, handle;
             if (this.afVariation === BarChartVariation.Horizontal) {
-                this._xAxisHandle.attr('display', null);
-                toCall = this._xAxis;
-                tickSize = -(this._dims.height - this._margin.top - this._margin.bottom);
-                handle = this._xAxisHandle;
+                this.xAxisHandle.attr('display', null);
+                toCall = this.xAxis;
+                tickSize = -(this.dims.height - this.margin.top - this.margin.bottom);
+                handle = this.xAxisHandle;
             }
             else {
-                this._yAxisHandle.attr('display', null);
-                toCall = this._yAxis;
-                tickSize = -(this._dims.width - this._margin.left - this._margin.right);
-                handle = this._yAxisHandle;
+                this.yAxisHandle.attr('display', null);
+                toCall = this.yAxis;
+                tickSize = -(this.dims.width - this.margin.left - this.margin.right);
+                handle = this.yAxisHandle;
             }
             // Computing the amount of ticks to show
-            const ticks = Math.min(Math.floor((this._dims.width - this._margin.left - this._margin.right) /
-                (this._tickWidth + this.xTickSize)) - 2, this.afVariation == BarChartVariation.Horizontal
-                ? this._xScale.ticks().length
-                : this._yScale.ticks().length);
+            const ticks = Math.min(Math.floor((this.dims.width - this.margin.left - this.margin.right) /
+                (this.tickWidth + this.xTickSize)) - 2, this.afVariation == BarChartVariation.Horizontal
+                ? this.xScale.ticks().length
+                : this.yScale.ticks().length);
             if (!transition) {
                 handle
                     .style('font-size', this.fontSize)
@@ -769,124 +732,171 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             }
             handle.selectAll('line').attr('stroke', 'lightgray');
             if (this.afVariation === BarChartVariation.Vertical)
-                this._yAxisHandle.select('.domain').attr('display', 'none');
+                this.yAxisHandle.select('.domain').attr('display', 'none');
         };
         // Highlight bar
         this.hover = (event) => {
             select(event.target)
-                .transition('hover')
+                .transition('color')
                 .duration(20)
-                .attr('fill', event.target.tagName === 'rect'
-                ? '#4C4C8B'
-                : 'var(--digi--color--text--link-hover)');
+                .attr('fill', (d) => {
+                var _a;
+                if (event.target.tagName === 'rect') {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
+                }
+                else {
+                    return this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                }
+            });
         };
         // Removing highlight from bar
         this.hoverOut = (event) => {
             select(event.target)
-                .transition('hover')
+                .transition('color')
                 .duration(this.defaultDuration)
-                .attr('fill', event.target.tagName === 'rect' ? '#00005a' : '#333333');
+                .attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
         };
         this.openTooltip = (...[, d]) => {
             // If type is string, the user has clicked on a y-axis tick
             if (typeof d === 'string') {
-                this._tooltipData = this._barChartContainer
-                    .select(`#barGroup${d.replace(/[^A-Z0-9]+/gi, '_')}`)
+                this.tooltipData = this.barChartContainer
+                    .select(`#${this.barGroupID(d)}`)
                     .datum();
             }
             else
-                this._tooltipData = d;
-            const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
-                .select(this._tooltipHeading)
-                .style('margin', '0 0.75rem 0 0 ')
-                .style('font-weight', 500)
-                .html(this._tooltipData.key);
+                this.tooltipData = d;
+            const tooltipBody = this.tooltip.select('.tooltipBody');
+            this.tooltip
+                .select('.tooltipHeading')
+                .html(this.tooltipData.key);
             tooltipBody
                 .selectAll('div')
-                .data([this._tooltipData])
+                .data(this.tooltipData.series ? this.tooltipData.series : [this.tooltipData])
                 .join('div')
                 .style('display', 'flex')
                 .style('flex-direction', 'row')
                 .style('flex-wrap', 'nowrap')
                 .style('white-space', 'nowrap')
                 .style('justify-content', 'space-between')
-                .html((d) => d.value.toLocaleString());
-            this._tooltip.style('display', 'flex');
-            this.positionTooltip(this._tooltipData);
+                .style('margin', '0.25rem 0')
+                .html((d) => {
+                return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
+            });
+            this.tooltip.style('display', null);
+            this.positionTooltip(this.tooltipData);
         };
         this.closeTooltip = () => {
-            this._tooltip.style('display', 'none');
+            this.tooltip.style('display', 'none');
         };
         // Positions tooltip in horizontal mode
         this.positionTooltip = (data) => {
-            const width = this._tooltip.node().getBoundingClientRect().width;
-            const height = this._tooltip.node().getBoundingClientRect().height + 8;
-            const diff = this._xScale(data.value) / 2 - width / 2;
-            if (this.afVariation === BarChartVariation.Horizontal) {
-                this._tooltip
-                    .style('transform', `translate(${this._margin.left + this.tickPadding + Math.max(diff, -4)}px, ${this._yScale(data.key) + this._yScale.bandwidth() + this._yScale.paddingInner() * this._yScale.bandwidth()}px )`)
-                    .style('max-width', this._xScale.range()[1] + 'px');
-                this._tooltip
-                    .select('digi-icon-caret-up')
-                    .style('position', 'absolute')
-                    .style('--digi--icon--color', 'white')
-                    .style('top', '-11px')
-                    .style('left', '0')
-                    .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this._xScale(data.value) / 2}px,0)`);
+            var _a;
+            const width = this.tooltip.node().getBoundingClientRect().width;
+            // Single bar
+            if ('serie' in data) {
+                if (this.afVariation === BarChartVariation.Horizontal) {
+                    const diff = this.xScale(data.value) / 2 - width / 2;
+                    this.tooltip
+                        .style('transform', `translate(${this.margin.left + this.tickPadding + Math.max(diff, -4)}px, ${this.yScale(data.key) + this.yScale.bandwidth() + this.yScale.paddingInner() * this.yScale.bandwidth()}px )`)
+                        .style('max-width', this.xScale.range()[1] + 'px');
+                    this.tooltip
+                        .select('digi-icon-caret-up')
+                        .style('position', 'absolute')
+                        .style('top', '-11px')
+                        .style('left', '0')
+                        .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
+                }
+                else {
+                    const index = (_a = this.mappedData.find(xPoint => xPoint.key === data.key)) === null || _a === void 0 ? void 0 : _a.series.findIndex(serie => serie.serie === data.serie);
+                    const barIndex = ((this.xScale.bandwidth() / this.dataWidth) * (index ? index + 1 : 1)) - (this.xScale.bandwidth() / this.dataWidth) / 2;
+                    // This should be where the x-axis starts
+                    const xStart = this.margin.left + this.tickPadding + this.yTickSize;
+                    // Creating adjustment for tooltip to not appear outside of chart
+                    const spaceToSVGEdge = 5;
+                    const inlineAdjustment = (this.dims.width - spaceToSVGEdge) < (this.xScale(data.key) + xStart + barIndex + width / 2) ? (((this.xScale(data.key) + xStart + barIndex + width / 2) - (this.dims.width - spaceToSVGEdge)) / width) * 100 : 0;
+                    this.tooltip
+                        .style('transform', `translate( calc(${this.xScale(data.key) + xStart + barIndex}px - ${50 + inlineAdjustment}%), calc(-100% + ${(data.value > 0 ? this.yScale(data.value) : this.yScale(0)) - 2}px) )`);
+                    this.tooltip
+                        .select('digi-icon-caret-down')
+                        .style('position', 'absolute')
+                        .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
+                        .style('bottom', '-11.5px');
+                }
             }
             else {
-                this._tooltip
-                    .style('transform', `translate(${this._margin.left + this.tickPadding + this._xScale(data.key) + this._xScale.bandwidth() / 2 - width / 2}px, ${this._yScale(data.value) - height}px )`)
-                    .style('max-width', this._xScale.range()[1] + 'px');
-                this._tooltip
-                    .select('digi-icon-caret-down')
-                    .style('position', 'absolute')
-                    .style('--digi--icon--color', 'white')
-                    .style('left', '0')
-                    .style('bottom', '-11px')
-                    .style('transform', `translate(${width / 2 - 6}px,0)`);
+                if (this.afVariation === BarChartVariation.Horizontal) {
+                    this.tooltip
+                        .style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
+                    );
+                    this.tooltip
+                        .select('digi-icon-caret-up')
+                        .style('position', 'absolute')
+                        .style('top', '-11px')
+                        .style('left', '0')
+                        .style('transform', `translate(50%,0)`);
+                    //this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
+                }
+                else {
+                    const xStart = this.margin.left + this.tickPadding + this.yTickSize;
+                    const translatePoint = this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2;
+                    const yMax = max(data.series.map(elem => elem.value));
+                    // Creating adjustment for tooltip to not appear outside of chart
+                    const spaceToSVGEdge = 5;
+                    const inlineAdjustment = (this.dims.width - spaceToSVGEdge) < (translatePoint + width / 2) ? (((translatePoint + width / 2) - (this.dims.width - spaceToSVGEdge)) / width) * 100 : 0;
+                    this.tooltip
+                        .style('transform', `translate( calc(${this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2}px - ${50 + inlineAdjustment}%), calc(-100% + ${this.yScale(yMax && yMax > 0 ? yMax : 0) - 1}px) )`);
+                    this.tooltip
+                        .select('digi-icon-caret-down')
+                        .style('position', 'absolute')
+                        .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
+                        .style('bottom', '-11.5px');
+                }
             }
         };
         // Once texts has fully loaded, we can recompute some sizes
         this.recomputeTextSize = () => {
             var _a, _b;
             if (this.afVariation == BarChartVariation.Horizontal)
-                this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
+                this.tickWidth = this.getLargestText(this.xScale.ticks().map((tick) => tick.toLocaleString()));
             this.tickSizes();
-            this._barChartContainer.selectAll('.barGroup').data(this.reshapeData);
-            if ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
-                this._textSelection.remove();
+            this.barChartContainer.selectAll('.barGroup').data(this.mappedData);
+            if ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
+                this.textSelection.remove();
             this.initBarText();
         };
         // Removes resize observer for chart and inits table
         this.activateTable = (event) => {
             this.closeTooltip();
             this.barChartObserver.disconnect();
-            this.tableObserver.observe(this._chartDiv);
-            this._status.innerHTML = '<p>Visas som tabell</p>';
-            select(this._host).select('.tableButton').style('display', 'none');
-            select(this._host).select('.chartButton').style('display', null);
+            this.status.innerHTML = '<p>Visas som tabell</p>';
+            select(this.host).select('.tableButton').style('display', 'none');
+            select(this.host).select('.chartButton').style('display', null);
             event.target.nextSibling.lastChild.focus();
             const duration = 150;
-            this._svg
+            this.svg
                 .attr('opacity', 1)
                 .transition('fadeout')
                 .duration(duration)
                 .attr('opacity', 0)
                 .on('end', () => {
-                this._svg.remove();
-                this._legendDiv.style['display'] = 'none';
-                this._tableDiv.style['display'] = 'block';
+                this.svg.remove();
+                select(this.legendDiv).select('.legend').selectAll('.legendChip').remove();
+                this.legendDiv.style['display'] = 'none';
+                this.tableDiv.style['display'] = 'block';
                 this.setTableContent();
                 this.setTableDimensions();
-                select(this._tableDiv)
+                select(this.tableDiv)
                     .style('opacity', 0)
                     .transition('fadein')
                     .duration(duration)
                     .style('opacity', 1);
+                this.chartDiv.style['display'] = 'none';
             });
-            select(this._legendDiv)
+            select(this.legendDiv)
                 .style('opacity', 1)
                 .transition('fadeout')
                 .duration(duration)
@@ -894,12 +904,12 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         };
         // Removes observer and calls init functions for line chart
         this.reInitChart = (event) => {
-            this.tableObserver.disconnect();
-            this._status.innerHTML = '<p>Visas som diagram</p>';
-            select(this._host).select('.tableButton').style('display', null);
-            select(this._host).select('.chartButton').style('display', 'none');
+            this.status.innerHTML = '<p>Visas som diagram</p>';
+            select(this.host).select('.tableButton').style('display', null);
+            select(this.host).select('.chartButton').style('display', 'none');
             event.target.previousSibling.lastChild.focus();
-            const table = select(this._tableDiv);
+            const table = select(this.tableDiv);
+            const duration = 150;
             table
                 .style('opacity', 1)
                 .transition()
@@ -907,12 +917,19 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 .style('opacity', 0)
                 .on('end', () => {
                 table.style('display', 'none');
+                this.chartDiv.style['display'] = 'flex';
+                this.legendDiv.style['display'] = 'grid';
                 this.initChain();
-                this._svg
+                this.svg
                     .attr('opacity', 0)
                     .transition()
-                    .duration(150)
+                    .duration(duration)
                     .attr('opacity', 1);
+                select(this.legendDiv)
+                    .style('opacity', 0)
+                    .transition('fadeout')
+                    .duration(duration)
+                    .style('opacity', 1);
             });
         };
         this.afVariation = BarChartVariation.Vertical;
@@ -921,183 +938,239 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data != 'string')
-            this._chartData = data;
-        else
-            this._chartData = JSON.parse(data);
+        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
+            if (typeof data != 'string')
+                this.chartData = data;
+            else
+                this.chartData = JSON.parse(data);
+            this.series = this.chartData.data.series.map(serie => serie.title);
+        }
+        this.mappedData = this.reshapeData();
+        // checking for width of each tick
+        this.mappedData.forEach((elem) => {
+            if (elem.series.length > this.dataWidth)
+                this.dataWidth = elem.series.length;
+        });
+        if (this.dataWidth > 1)
+            this.barGap = 1;
     }
     initSvg() {
         var _a, _b, _c, _d, _e, _f, _g;
         // Fetch number formatting
-        this._numberFormat = {
-            maximumSignificantDigits: (_c = (_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
-            notation: ((_f = (_e = (_d = this._chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
+        this.numberFormat = {
+            maximumSignificantDigits: (_c = (_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
+            notation: ((_f = (_e = (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
                 ? 'compact'
                 : 'standard'
         };
-        select(this._chartDiv).select('svg').remove();
-        this._maxHeight = (_g = select(this._host)
+        select(this.chartDiv).select('.chartSVG').remove();
+        this.maxHeight = (_g = select(this.host)
             .node()
             .parentNode) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect().height;
-        this.barChartObserver.observe(this._chartDiv);
+        this.barChartObserver.observe(this.chartDiv);
         // Getting rem-size
-        this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        this.setMinMax();
+        this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
         this.setDims();
+        this.setMinMax();
         this.setMargins();
         // Appending svg
-        this._svg = select(this._chartDiv)
+        this.svg = select(this.chartDiv)
             .append('svg')
+            .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
             .attr('role', 'img')
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
-            : 'Stapeldiagram');
-        this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
+            .attr('aria-label', this.chartData && this.chartData.title
+            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
+            : 'Stapeldiagram')
+            .attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
+    }
+    initLegend() {
+        const rectSize = 18;
+        const legendData = this.chartData.data.series.map(serie => serie.title);
+        if (this.chartData.data.averageLine)
+            legendData.push(this.chartData.data.averageLine.text);
+        const legendChips = select(this.legendDiv).select('.legend')
+            .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
+            .style('margin-top', '0.5rem')
+            .selectAll('.legendChip')
+            .data(legendData)
+            .join('div')
+            .attr('class', 'legendChip')
+            .style('display', 'flex')
+            .style('flex-direction', 'row')
+            .style('align-items', 'center')
+            .style('gap', '0.25rem')
+            .style('cursor', 'default')
+            .on('mouseenter', (_event, serie) => this.highlightBars(serie))
+            .on('mouseleave', this.resetBarColor);
+        legendChips.append('svg')
+            .attr('width', rectSize + 1)
+            .attr('height', rectSize + 1)
+            .append('rect')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', rectSize)
+            .attr('height', rectSize)
+            .attr('rx', 4)
+            .attr('ry', 4)
+            .attr('fill', (title) => this.colorFunction(title));
+        legendChips.append('span').style('text-wrap', 'nowrap').style('font-size', '0.875rem').text((d) => d);
+        if (this.chartData.data.averageLine) {
+            const averageLine = legendChips.filter(':last-child')
+                .on('mouseenter', (_event, serie) => this.highlightAverageLine(serie));
+            const miniSVG = averageLine
+                .select('svg')
+                .attr('width', rectSize * 2);
+            miniSVG.select('rect').remove();
+            miniSVG.append('line')
+                .attr('x1', 1)
+                .attr('x2', rectSize * 2 - 1)
+                .attr('y1', rectSize / 2 + 1)
+                .attr('y2', rectSize / 2 + 1)
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-dasharray', '12, 7');
+        }
     }
     initToolTip() {
         // Getting handle for tooltip
-        this._tooltip = select('#' + this.afId);
-        this._tooltip.select('.close').on('click', this.closeTooltip);
-        this._tooltipHeading =
-            'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1); // increment heading level by one
-        // Add heading placeholder for heading
-        this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading)
+        this.tooltip = select('#' + this.afId);
+        this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
+        this.tooltip.selectAll('.tooltipHeading').remove();
+        this.tooltip
+            .select('.tooltipHead')
+            .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
             .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
+            .style('text-wrap', 'wrap')
             .style('font-size', '1rem')
-            .style('margin', '0 0.75rem')
+            .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
+        this.tooltip.style('display', 'none');
     }
     initEmpty() {
-        select(this._chartDiv).select('svg').remove();
-        this._maxHeight = select(this._host)
+        select(this.chartDiv).select('.chartSVG').remove();
+        this.maxHeight = select(this.host)
             .node()
             .parentNode.getBoundingClientRect().height;
-        this.barChartObserver.observe(this._chartDiv);
-        // Getting rem-size
-        this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        //this.setMinMax();
+        this.barChartObserver.observe(this.chartDiv);
         this.setDims();
+        // Getting rem-size
+        this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
         this.setMargins();
         // Appending svg
-        this._svg = select(this._chartDiv)
+        this.svg = select(this.chartDiv)
             .append('svg')
+            .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
             .attr('role', 'img')
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
-            : 'Stapeldiagram');
-        this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
+            .attr('aria-label', this.chartData && this.chartData.title
+            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
+            : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
-        select(this._titleDiv)
+        select(this.titleDiv)
             .select(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
+        this.tooltip = select('#' + this.afId);
+        this.tooltip.style('display', 'none');
         this.loadingState(true);
     }
     loadingState(empty) {
-        this._loading = true;
+        this.loading = true;
         // close potentially open tooltip
-        if (this._tooltip)
+        if (this.tooltip)
             this.closeTooltip();
-        select(this._host).select('.tableButton').style('display', 'none');
+        select(this.host).select('.tableButton').style('display', 'none');
         const newHeight = this.setDims();
         this.transitionTitle();
-        this._xAxisHandle.selectAll('.tick').remove();
-        this._xAxisHandle.select('path').remove();
-        this._svg
+        this.xAxisHandle.selectAll('.tick').remove();
+        this.xAxisHandle.select('path').remove();
+        this.svg
             .transition()
             .duration(400)
-            .attr('width', this._dims.width)
-            .attr('height', this._dims.height)
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+            .attr('aria-label', this.chartData && this.chartData.title
+            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
             : 'Stapeldiagram');
         this.setMargins(true);
-        select(this._titleDiv)
+        select(this.titleDiv)
             .select(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         // Waiting with observing for changes until transition to regular bars is complete
-        this._barChartContainer
+        this.barChartContainer
             .transition('position')
             .duration(this.defaultDuration)
             .ease(polyInOut)
-            .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+            .attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
         // If there is a new height
         if (newHeight) {
             // Update y-axis with potentially new height (might want to do a check here)
             this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.range([
-                    this._margin.top,
-                    this._dims.height - this._margin.bottom
+                ? this.yScale.range([
+                    this.margin.top,
+                    this.dims.height - this.margin.bottom
                 ])
-                : this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
+                : this.yScale.range([
+                    this.dims.height - this.margin.bottom,
+                    this.margin.top
                 ]);
-            this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+            this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         const animateBars = () => {
-            this._barChartContainer.selectAll('.barGroup').remove();
-            this._barSelection = this._barChartContainer
+            this.barChartContainer.selectAll('.interactiveElements').remove();
+            this.barSelection = this.barChartContainer
+                .append('g')
+                .attr('class', 'interactiveElements')
+                .style('isolation', 'isolate')
                 .selectAll('barGroup')
-                .data(this.reshapeData)
+                .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
-                .append('rect')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
                 .attr('class', 'bar')
-                .style('cursor', 'pointer');
-            this._barSelection
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._dims.height - this._margin.bottom)
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
+                ? this.yScale(d.key)
+                : this.dims.height - this.margin.bottom)
+                .attr('x', this.xFunction)
                 .attr('ry', 4)
                 .attr('rx', 4)
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth())
+                .attr('width', this.widthFunction)
                 .attr('height', () => 0)
-                //.attr('height', (d: any) => this.afVariation === BarChartVariation.Horizontal ? this._yScale.bandwidth() : (this._dims.height - this._margin.bottom) - this._yScale(d.value))
-                .attr('fill', 'gray')
-                .transition()
+                .attr('fill', 'gray');
+            this.barChartContainer.selectAll('.bar')
+                .transition('animateBar')
                 .duration(400)
                 .delay((...[, i]) => i * 150)
-                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._yScale(d.value))
-                .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.bandwidth()
-                : this._dims.height - this._margin.bottom - this._yScale(d.value));
-            this._barSelection
-                .transition()
+                .attr('y', this.yFunction)
+                .attr('height', this.heightFunction);
+            this.barChartContainer.selectAll('.bar')
+                .transition('animateBar')
                 .duration(400)
                 .ease(linear$1)
                 .delay((...[, i]) => i * 150 + 400)
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._dims.height - this._margin.bottom)
+                ? this.yScale(d.key)
+                : this.dims.height - this.margin.bottom)
                 .attr('height', () => 0)
                 .on('end', (...[, i]) => {
-                if (i === this._placeholderTicks.length - 1)
+                if (i === this.placeholderTicks.length - 1)
                     animateBars();
             });
         };
         const flattenBars = () => {
-            this._barChartContainer
-                .selectAll('rect')
-                .transition()
+            this.barChartContainer
+                .selectAll('.bar')
+                .transition('animateBar')
                 .duration(200)
                 .ease(linear$1)
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._dims.height - this._margin.bottom)
+                ? this.yScale(d.key)
+                : this.dims.height - this.margin.bottom)
                 .attr('height', () => 0)
                 .on('end', (...[, i]) => {
                 if (i != 0)
@@ -1105,7 +1178,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 this.setYScale(true);
                 this.setValueTicks();
                 this.setXScale(true);
-                this.barChartObserver.observe(this._chartDiv);
+                this.barChartObserver.observe(this.chartDiv);
                 animateBars();
             });
         };
@@ -1115,20 +1188,20 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             flattenBars();
     }
     transitionTitle() {
-        const height = select(this._titleDiv).style('height');
-        select(this._titleDiv)
-            .style('height', this._prevHeight)
+        const height = select(this.titleDiv).style('height');
+        select(this.titleDiv)
+            .style('height', this.prevHeight)
             .transition('adjust')
             .duration(400)
             .style('height', height)
-            .on('end', () => select(this._titleDiv).style('height', null));
+            .on('end', () => select(this.titleDiv).style('height', null));
     }
     initYAxis(empty) {
         this.setYScale(empty);
-        this._barChartContainer = this._svg
+        this.barChartContainer = this.svg
             .append('g')
-            .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-        this._yAxisHandle = this._barChartContainer.append('g');
+            .attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
+        this.yAxisHandle = this.barChartContainer.append('g');
         if (this.afVariation === BarChartVariation.Horizontal) {
             this.tickSizes();
             this.setNamedTicks();
@@ -1140,31 +1213,31 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     // Sets the largest and smallest value from series 0, Should only be used when not loading
     setMinMax() {
         var _a, _b, _c, _d, _e, _f, _g;
-        const max$1 = max((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
-            ? max((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
+        const max$1 = max((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
+            ? max((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
             : 0;
-        const min$1 = min([0, min((_c = this._chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
-            ? min([0, min((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
+        const min$1 = min([0, min((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
+            ? min([0, min((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
             : 0;
-        this._maxVal = max$1;
-        this._minVal = min$1;
-        this._tempScale = linear()
-            .domain([this._minVal, this._maxVal])
-            .nice(((_f = (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.numberOfReferenceLines)
-            ? (_g = this._chartData) === null || _g === void 0 ? void 0 : _g.meta.numberOfReferenceLines
+        this.maxVal = max$1;
+        this.minVal = min$1;
+        this.tempScale = linear()
+            .domain([this.minVal, this.maxVal])
+            .nice(((_f = (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.numberOfReferenceLines)
+            ? (_g = this.chartData) === null || _g === void 0 ? void 0 : _g.meta.numberOfReferenceLines
             : 3)
             .domain();
     }
     // Setting up x-axis, getting margin.right in this function
     initXAxis(empty) {
         this.setXScale(empty);
-        this._xAxisHandle = this._barChartContainer
+        this.xAxisHandle = this.barChartContainer
             .append('g')
-            .attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+            .attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         if (this.afVariation === BarChartVariation.Horizontal) {
             this.setValueTicks();
             // Removing first tick, because it aligns with y-axis domain
-            this._xAxisHandle.select('.tick').select('line').remove();
+            //this.xAxisHandle.select('.tick').select('line').remove();
         }
         else {
             if (!empty) {
@@ -1176,79 +1249,84 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     }
     // Initializing bars, can only handle one series of bars for now
     initBars() {
-        this._barSelection = this._barChartContainer
+        this.barSelection = this.barChartContainer
+            .append('g')
+            .attr('class', 'interactiveElements')
+            .style('isolation', 'isolate')
             .selectAll('barGroup')
-            .data(this.reshapeData)
+            .data(this.mappedData)
             .join('g')
             .attr('class', 'barGroup')
-            .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
-            .append('rect')
+            .attr('id', (d) => this.barGroupID(d.key));
+        this.barSelection.selectAll('.barGroup')
+            .data((d) => {
+            return d.series;
+        })
+            .join('rect')
             .attr('class', 'bar')
-            .style('cursor', 'pointer');
-        this._barSelection
-            .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale(d.key)
-            : this._yScale(d.value))
-            .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? 2
-            : this._xScale(d.key))
+            .style('cursor', 'pointer')
+            .attr('x', this.xFunction)
+            .attr('y', this.yFunction)
             .attr('ry', 4)
             .attr('rx', 4)
-            .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._xScale(d.value)
-            : this._xScale.bandwidth())
-            .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale.bandwidth()
-            : this._dims.height - this._margin.bottom - this._yScale(d.value))
-            .attr('fill', '#00005a')
+            .attr('width', this.widthFunction)
+            .attr('height', this.heightFunction)
+            .attr('fill', (d) => this.colorFunction(d.serie))
             .on('mouseenter', this.hover)
             .on('mouseleave', this.hoverOut)
             .on('click', this.openTooltip);
     }
     initBarText() {
-        this._textSelection = this._barChartContainer
+        var _a, _b;
+        if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
+            return;
+        this.textSelection = this.barChartContainer
             .selectAll('.barGroup')
             .append('text');
-        this._textSelection
-            .text((d) => d.value.toLocaleString(undefined, this._numberFormat))
+        this.textSelection
+            .text((d) => {
+            return d.value ? d.value.toLocaleString(undefined, this.numberFormat) : undefined;
+        })
             .attr('class', 'barText')
             .attr('font-size', this.fontSize)
             .attr('font-weight', '600')
             .attr('text-anchor', 'end')
             .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-            : this._yScale(d.value))
+            ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+            : this.yScale(d.value))
             .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._xScale(d)
-            : this._xScale(d.key) + this._xScale.bandwidth())
+            ? this.xScale(d)
+            : this.xScale(d.key) + this.xScale.bandwidth())
             .attr('dy', () => this.afVariation == BarChartVariation.Horizontal ? '0.35em' : '-0.25em')
             .style('pointer-events', 'none')
-            .style('display', () => { var _a, _b; return ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; });
+            .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; });
         this.adjustBarText();
     }
     initChain() {
         this.initSvg();
+        this.initLegend();
         this.initToolTip();
         this.initYAxis();
         this.initXAxis();
         this.initBars();
+        this.averageLine();
         this.initBarText();
     }
     async updateChain() {
         var _a, _b, _c, _d, _e, _f;
         // Fetch number formatting
-        this._numberFormat = {
-            maximumSignificantDigits: (_c = (_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
-            notation: ((_f = (_e = (_d = this._chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
+        this.numberFormat = {
+            maximumSignificantDigits: (_c = (_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
+            notation: ((_f = (_e = (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
                 ? 'compact'
                 : 'standard'
         };
-        if (this._tooltip)
+        if (this.tooltip)
             this.closeTooltip();
         // Check whether we are in table mode or not
-        if (this._tableDiv.style['display'] == 'block') {
-            if (!this._chartData.title) {
-                select(this._titleDiv)
+        if (this.tableDiv.style['display'] == 'block') {
+            if (!this.chartData.title) {
+                select(this.titleDiv)
                     .select(this.afHeadingLevel)
                     .html(`${_t.loading}...`);
             }
@@ -1260,85 +1338,86 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         }
         else {
             // displaying legend again
-            if (this._loading) {
-                select(this._host).select('.tableButton').style('display', null);
-                select(this._legendDiv).style('display', null);
+            if (this.loading) {
+                select(this.host).select('.tableButton').style('display', null);
+                select(this.legendDiv).style('display', null);
                 this.initToolTip();
+                this.initLegend();
             }
             // Disconnect resize observer while adjusting things
             this.barChartObserver.disconnect();
             this.setMinMax();
             const newHeight = this.setDims();
             this.transitionTitle();
-            this._svg
-                .transition()
-                .duration(400)
-                .attr('width', this._dims.width)
-                .attr('height', this._dims.height)
-                .attr('aria-label', this._chartData && this._chartData.title
-                ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+            this.svg
+                .attr('aria-label', this.chartData && this.chartData.title
+                ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
                 : 'Stapeldiagram');
             this.setMargins();
             // Waiting with observing for changes until transition to regular bars is complete
-            this._barChartContainer
+            this.barChartContainer
                 .transition('position')
                 .duration(this.defaultDuration)
                 .ease(polyInOut)
-                .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-            if (!this._loading)
-                this._barChartContainer.on('end', () => this.barChartObserver.observe(this._chartDiv));
+                .attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
+            if (!this.loading)
+                this.barChartContainer.on('end', () => this.barChartObserver.observe(this.chartDiv));
             // If there is a new height
             if (newHeight) {
                 // Update y-axis with potentially new height (might want to do a check here)
                 this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.range([
-                        this._margin.top,
-                        this._dims.height - this._margin.bottom
+                    ? this.yScale.range([
+                        this.margin.top,
+                        this.dims.height - this.margin.bottom
                     ])
-                    : this._yScale.range([
-                        this._dims.height - this._margin.bottom,
-                        this._margin.top
+                    : this.yScale.range([
+                        this.dims.height - this.margin.bottom,
+                        this.margin.top
                     ]);
-                this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+                this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
             }
             this.tickSizes();
             this.setYScale();
             this.setXScale();
             this.setTickInteraction();
-            this._tickWidth = this.getLargestText(this.afVariation == BarChartVariation.Horizontal
-                ? this._xScale.ticks().map((tick) => tick.toLocaleString())
-                : this._yScale.ticks().map((tick) => tick.toLocaleString()));
+            this.tickWidth = this.getLargestText(this.afVariation == BarChartVariation.Horizontal
+                ? this.xScale.ticks().map((tick) => tick.toLocaleString())
+                : this.yScale.ticks().map((tick) => tick.toLocaleString()));
             this.setValueTicks(true);
-            if (this._loading) {
-                select(this._legendDiv)
+            if (this.loading) {
+                select(this.legendDiv)
                     .style('opacity', 0)
                     .transition()
                     .duration(400)
                     .ease(polyInOut)
                     .style('opacity', 1);
-                this._margin.right =
-                    this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+                this.margin.right =
+                    this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
                         this.yTickSize +
                         this.tickPadding;
                 // Update x-axis with new width
-                this._xScale.range([
+                this.xScale.range([
                     0,
-                    this._dims.width - this._margin.right - this._margin.left
+                    this.dims.width - this.margin.right - this.margin.left
                 ]);
                 this.setNamedTicks(true);
                 // Stop animation
-                this._barSelection.selectAll('.barGroup').on('end', null);
-                this._loading = false;
-                this._barSelection
-                    .transition()
+                this.barChartContainer.selectAll('.barGroup').on('end', null);
+                select(this.titleDiv).select('.loadingHeader').remove();
+                this.loading = false;
+                this.barChartContainer.selectAll('.bar').interrupt('animateBar');
+                this.barChartContainer.selectAll('.bar').transition()
                     .duration(this.defaultDuration)
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key)
-                    : this._dims.height - this._margin.bottom)
+                    ? this.yScale(d.key)
+                    : this.dims.height - this.margin.bottom)
                     .attr('height', () => 0)
-                    .on('end', (...[, i]) => i === this._placeholderTicks.length - 1
-                    ? this.updateBars(true)
-                    : null);
+                    .on('end', (...[, i]) => {
+                    if (i === this.placeholderTicks.length - 1) {
+                        this.updateBars();
+                        this.barChartObserver.observe(this.chartDiv);
+                    }
+                });
                 this.setTickInteraction();
             }
             else {
@@ -1348,42 +1427,60 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             }
         }
     }
+    // Getting correct color given index or name of data serie
+    colorFunction(input) {
+        var _a;
+        if (typeof input === 'number') {
+            return this.evalColorVar(this.colorPalettes[input]);
+        }
+        else {
+            const index = this.chartData.data.series.findIndex((serie) => serie.title === input);
+            if (index > 0) {
+                if ((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern)
+                    return 'url(#prognosis)';
+                else
+                    return this.evalColorVar(this.colorPalettes[index]);
+            }
+            else
+                return this.evalColorVar(this.colorPalettes[0]);
+        }
+    }
     // Resizing bar chart
     resize() {
-        var _a;
         const newHeight = this.setDims();
-        this.setMargins();
-        (_a = this._svg) === null || _a === void 0 ? void 0 : _a.attr('width', this._dims.width).attr('height', this._dims.height);
-        this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-        this._margin.right =
-            this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+        //this.setMargins();
+        this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
+        this.margin.right =
+            this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
                 this.yTickSize +
                 this.tickPadding;
         // If there is a new height
         if (newHeight) {
             // Update y-axis with potentially new height (might want to do a check here)
             this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.range([
-                    this._margin.top,
-                    this._dims.height - this._margin.bottom
+                ? this.yScale.range([
+                    this.margin.top,
+                    this.dims.height - this.margin.bottom
                 ])
-                : this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
+                : this.yScale.range([
+                    this.dims.height - this.margin.bottom,
+                    this.margin.top
                 ]);
-            this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+            this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         // Update x-axis with new width
-        this._xScale.range([
+        this.xScale.range([
             0,
-            this._dims.width - this._margin.right - this._margin.left
+            this.dims.width - this.margin.right - this.margin.left
         ]);
         this.setNamedTicks();
         this.setValueTicks();
+        this.setTickInteraction();
+        this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
-        if (this._tooltipData)
-            this.positionTooltip(this._tooltipData);
+        if (this.tooltip.style('display') !== 'none')
+            this.positionTooltip(this.tooltipData);
     }
     // Returns the longest text from an array of strings
     getLargestText(array) {
@@ -1396,30 +1493,33 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         });
         return width;
     }
+    adjustColor(color, amount) {
+        return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
+    }
     componentWillLoad() {
         this.afChartDataUpdate(this.afChartData);
     }
     componentDidLoad() {
-        if (!this._chartData || Object.keys(this._chartData).length === 0) {
-            this._loading = true;
+        if (!this.chartData || Object.keys(this.chartData).length === 0) {
+            this.loading = true;
             return this.initEmpty();
         }
         this.initChain();
         document.fonts.ready.then(() => {
             this.recomputeTextSize();
             this.setNamedTicks();
-            this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+            this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
         });
     }
     disconnectedCallback() {
         this.barChartObserver.disconnect();
     }
     componentWillUpdate() {
-        this._prevHeight = select(this._titleDiv).style('height');
+        this.prevHeight = select(this.titleDiv).style('height');
     }
     componentDidUpdate() {
-        if (this._tableDiv.style['display'] != 'block' &&
-            Object.keys(this._chartData).length === 0) {
+        if (this.tableDiv.style['display'] != 'block' &&
+            Object.keys(this.chartData).length === 0) {
             // Disconnect old barchartobserver while doing resizing
             this.barChartObserver.disconnect();
             return this.loadingState();
@@ -1428,15 +1528,15 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     }
     // Not currently used
     /*get cssModifiers() {
-          return {
-              'digi-bar-chart--vertical': this.afVariation == 'vertical',
-              'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
-          };
-      }*/
+      return {
+        'digi-bar-chart--vertical': this.afVariation == 'vertical',
+        'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
+      };
+    }*/
     // Returns pixelwidth of text given the current fontSize (costly function using .each)
     getTextSize(text) {
         const textWidth = [];
-        const svg = select(this._chartDiv).append('svg');
+        const svg = select(this.chartDiv).append('svg');
         svg
             .selectAll('dummyText')
             .data([text])
@@ -1451,21 +1551,18 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         svg.remove().exit();
         return textWidth[0];
     }
-    // Setting table content from this._chartData
+    // Setting table content from this.chartData
     setTableContent() {
-        this._tableDiv.innerHTML = `<digi-table af-size="small" af-variation="primary"> <table><caption>${this._chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`;
+        this.tableDiv.innerHTML = `<digi-table af-size="small" style="width:100%" af-variation="primary"> <table><caption>${this.chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`;
     }
     setTableDimensions() {
-        const table = select(this._tableDiv);
-        table
-            // The last value is for compensating the padding set on the table element, changing padding in css, will need change in these two lines
-            .style('height', this._dims.height + 'px');
-        table.style('width', this._dims.width - this._rem * 0.65 + 'px');
+        const table = select(this.tableDiv);
+        table.style('display', 'flex').style('height', '100%').style('width', '100%');
     }
     // Extracting all headings from data and returning a string with <th>-elements with headings
     headings() {
-        let headingsString = `<th scope="col">${this._chartData.x}</th>`;
-        this._chartData.data.series.forEach((elem) => {
+        let headingsString = `<th scope="col">${this.chartData.x}</th>`;
+        this.chartData.data.series.forEach((elem) => {
             headingsString = headingsString.concat(`<th scope="col">${elem.title}</th>`);
         });
         return headingsString;
@@ -1473,13 +1570,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     // Building the table body
     tableBody() {
         let body = '';
-        if (this._chartData && this._chartData.data) {
-            const loopable = this._chartData.data.xValueNames
-                ? this._chartData.data.xValueNames
-                : this._chartData.data.xValues;
+        if (this.chartData && this.chartData.data) {
+            const loopable = this.chartData.data.xValueNames
+                ? this.chartData.data.xValueNames
+                : this.chartData.data.xValues;
             loopable.forEach((elem, index) => {
                 let cells = '';
-                this._chartData.data.series.forEach((serie) => {
+                this.chartData.data.series.forEach((serie) => {
                     cells = cells.concat(`<td>${serie.yValues[index] != null ? serie.yValues[index].toLocaleString() : '-'}</td>`);
                 });
                 body = body.concat(`<tr><th scope='row'>${elem}${cells}</th></tr>`);
@@ -1488,21 +1585,18 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         return body;
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         // Setting header
         let heading = '';
-        if (this._chartData) {
-            if (!this._chartData.subTitle)
-                heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
-            else {
-                if (!this._chartData.infoText)
-                    heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-                else
-                    heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${(_a = this._chartData) === null || _a === void 0 ? void 0 : _a.subTitle}
-				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
-            }
+        if (this.chartData) {
+            if (!this.chartData.subTitle)
+                heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}>`;
+            else
+                heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
+            if (this.chartData.infoText)
+                heading = `${heading}<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span>`;
         }
-        return (h(Host, { key: '7659fcc4817cdfb3f19f2bd11a41464c13b5e19e', ref: (el) => (this._host = el) }, h("div", { key: '063611cf8dbb2554904d972ed3fc1f89d714772e', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'ad58c43c2629e7b2b97e3ad1658646e5171b1531', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '2234460c0ffab8e7d251f099f4f2d38e1e5ebede', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'b82a89d578d997ab878d44a2928e5e31773bd34f', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b5dc532f7655bd383d0dcf42f8851edbc81b448c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'f868d9fd2c37c247e8abdd59cf2b9342ad120fef', slot: "icon" }), "Visa diagram"), h("div", { key: '6a0f7838d86a43b46d9a036ad935f50ebb2b523f', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '5f37b9eaf1030cd1d5b1b0360cdaaa61f953b624', class: "chartTooltip", id: this.afId }, h("div", { key: 'a89608cb64620456a165ba4fb57db823870d2231', class: "tooltipBody" }), h("digi-icon-x", { key: 'e842c2b42f6bc7d6dfdad1d1b8a7acb9f8df5a1a', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'f07154ab370a948016aa30a2547c4c9b25fae03b', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '385151df18d373779257040d298bf8c108184500', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'd5f07fc01a628aa2035a96d86621b6bab1e73f01', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h(Host, { key: 'd39019eecd4013769648a7cdb1e5dc48712de934', ref: (el) => (this.host = el) }, h("svg", { key: '9e4dbfcd19038c6b9c8cfe26b4e8b3c5ef624896', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '9ed2bc8b3064642d01e9028fa91c55577ed2da1c' }, h("pattern", { key: 'ca867a03dac364d29de422bc074c7ff3a8bac858', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: '2f2169ba84fcbb198a8f109bc57971beb3c3ca09', width: "8", height: "8", fill: 'white' }), h("line", { key: 'ad51412cb272233eb58a82a293643c4e865e34e9', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: 'ecc0ffeb0eda0d84102678c17163d0afc472cde5', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: 'ca9a51785850ea8e26f4ca3b84dc28401325af63', width: "8", height: "8", fill: 'white' }), h("line", { key: 'd7dd225c20b588f74bff91d44ff5abc8839bc445', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '654a002d89f6ce33fc4958afe3997829511b867e', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: '6d0286f1d11de92c88083618d4acb3300f36857d', width: "8", height: "8", fill: 'white' }), h("line", { key: '4acd94253dbdb1fc85090d677d246028a6e595d6', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '9022c75fa8077b2c025aac91b8c1a565b50ad8f0', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '4a28b8506806ca2418fd21512460baebe84614d5', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '69f4603b0fde842906e17abee241c6e3b4de1059', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.title) ? (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '803f63ac1912c5979c43e7c58d28591a1d6ce461', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '7d87badd6ae3df65127bdfe4c4308c0d38d5ccb7', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title) ? (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'f92c2eb9f08bf7f13a7eaea287b80a233efd95ef', slot: "icon" }), "Visa diagram"), h("div", { key: 'ee5b3ad8cdcfcf00891f56f7a7e738adf76f36c1', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'cbc0c8724ac73a07a4f2d01044d4928214e63f43', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '52cb24ae1a29f5381860031513b7b9e835044935', class: "chartTooltip", id: this.afId }, h("div", { key: '17c4c08dcf63cd263db4f32fecae7ec5216e3014', class: "tooltipHead" }, h("digi-icon-x", { key: 'f44a9a534ae02fe674fc0f9161e5c4b5a3eecb30', class: "tooltipClose" })), h("div", { key: 'ffbe44f6a8db4dc67d6980bd69ca2209e4a75745', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '5d9cce591ea02a7b8ebdb42af55f378ee064a48a', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '8b8b7cd614e5d6202bfce04e57c98ee040f15dab', class: "legend" })), h("div", { key: '64a35d431e28638ffece4dd12bdf04678ed13768', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return this; }
     static get watchers() { return {