@mozaic-ds/chart 0.1.0-beta.16 → 0.1.0-beta.18

package/src/components/doughnut/DoughnutChart.vue

@@ -90,6 +90,13 @@ const doughnutDataProps = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * Enable hover feature (may cause strange behavior when used with width and height in %)
+   */
+   enableHoverFeature: {
+    type: Boolean,
+    default: false,
+  },
   /**
    * Used to choose the colour set of the charts as defined in the Figma prototypes.
    * 7 colour sets are currently defined:
@@ -187,9 +194,10 @@ const doughnutChartData = computed<any>(() => {
         backgroundColor: getBackgroundColor(
           patternsColors.value,
           patternsOrderedList.value,
-          doughnutDataProps.disableAccessibility
+          doughnutDataProps.disableAccessibility,
+          doughnutDataProps.enableHoverFeature
         ),
-        borderColor: getBorderColor(patternsColors.value),
+        borderColor: getBorderColor(patternsColors.value, doughnutDataProps.enableHoverFeature),
       },
     ],
   };
@@ -216,7 +224,7 @@ const options = computed(() => {
   const colors = patternsColors.value;
   const patterns = patternsOrderedList.value;
   return {
-    onHover: getOnHoverOptions(),
+    onHover: doughnutDataProps.enableHoverFeature? getOnHoverOptions() : () => {},
     plugins: {
       legend: {
         display: false,
@@ -231,6 +239,9 @@ const options = computed(() => {
       title: {
         display: false,
       },
+      datalabels: {
+        display: false
+      },
       tooltip: {
         enabled: false,
         external: function (context: Context) {
@@ -262,6 +273,9 @@ const doughnutDataAndLabels = {
 const disablePattern = computed(() => {
   return doughnutDataProps.disableAccessibility;
 });
+const enableHover = computed(() => {
+  return doughnutDataProps.enableHoverFeature;
+})
 
 const htmlLegendPlugin = computed(() =>
   privateGetHtmlLegendPlugin(
@@ -271,7 +285,8 @@ const htmlLegendPlugin = computed(() =>
     patternsColors,
     patternsOrderedList,
     doughnutDataProps.maxValues,
-    doughnutDataAndLabels
+    doughnutDataAndLabels,
+    enableHover
   )
 );
 
@@ -279,15 +294,17 @@ onMounted(() => {
   getBackgroundColor(
     patternsColors.value,
     patternsOrderedList.value,
-    doughnutDataProps.disableAccessibility
+    doughnutDataProps.disableAccessibility,
+    enableHover.value
   );
 });
 watch(onHoverIndex, (newValue, oldValue) => {
-  if (newValue !== oldValue) {
+  if (newValue !== oldValue && enableHover.value) {
     getBackgroundColor(
       patternsColors.value,
       patternsOrderedList.value,
-      doughnutDataProps.disableAccessibility
+      doughnutDataProps.disableAccessibility,
+      enableHover.value
     );
   }
 });
@@ -296,7 +313,8 @@ watch(disablePattern, () => {
   getBackgroundColor(
     patternsColors.value,
     patternsOrderedList.value,
-    doughnutDataProps.disableAccessibility
+    doughnutDataProps.disableAccessibility,
+    enableHover.value
   );
 });
 </script>

package/src/components/line/LineChart.stories.ts

@@ -28,6 +28,8 @@ export const Default = {
         unit: "%",
       },
     ],
+    xAxisTitle: 'X Axis Title',
+    yAxisTitle: 'Y Axis Title',
   },
 } satisfies Story;
 

package/src/components/line/LineChart.vue

@@ -140,6 +140,20 @@ const lineDataProps = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  /**
+   * X axis title
+   */
+   xAxisTitle: {
+    type: String,
+    default: null,
+  },
+  /**
+   * Y axis title
+   */
+   yAxisTitle: {
+    type: String,
+    default: null,
+  },
   /**
    * Add custom CSS classes to the <canvas> element
    */
@@ -277,6 +291,9 @@ const options = computed(() => ({
     legend: {
       display: false,
     },
+    datalabels: {
+      display: false
+    },
     tooltip: {
       enabled: false,
       external: function (context: Context) {
@@ -298,10 +315,18 @@ const options = computed(() => ({
   scales: {
     x: {
       offset: true,
+      title: {
+        display: lineDataProps.xAxisTitle !== null,
+        text: lineDataProps.xAxisTitle
+      },
     },
     y: {
       type: 'linear' as const,
       display: true,
+      title: {
+        display: lineDataProps.yAxisTitle !== null,
+        text: lineDataProps.yAxisTitle
+      },
       position: 'left' as const,
       grid: {
         drawOnChartArea: true,

package/src/components/mixed/MixedBarLineChart.stories.ts

@@ -22,6 +22,9 @@ export const Default = {
     colourSet: 0,
     barUnit: '',
     lineUnit: '€',
+    xAxisTitle: 'X Axis',
+    yLeftAxisTitle: 'Y1 Axis',
+    yRightAxisTitle: 'Y2 Axis',
     barDatasets: [
       {
         type: 'bar',

package/src/components/mixed/MixedBarLineChart.vue

@@ -198,21 +198,21 @@ const mixedBarLineDataProps = defineProps({
    */
   xAxisTitle: {
     type: String,
-    default: 'title 1',
+    default: null,
   },
   /**
    * Title of the y left axis
    */
   yLeftAxisTitle: {
     type: String,
-    default: 'title 2',
+    default: null,
   },
   /**
    * Title of the y right axis
    */
   yRightAxisTitle: {
     type: String,
-    default: 'title 3',
+    default: null,
   },
 });
 
@@ -302,6 +302,9 @@ const options = computed(() => ({
     title: {
       display: false,
     },
+    datalabels: {
+      display: false
+    },
     tooltip: {
       enabled: false,
       external: function (context: Context) {
@@ -324,7 +327,7 @@ const options = computed(() => ({
     x: {
       offset: true,
       title: {
-        display: true,
+        display: mixedBarLineDataProps.xAxisTitle !== null,
         text: mixedBarLineDataProps.xAxisTitle,
       },
     },
@@ -336,7 +339,7 @@ const options = computed(() => ({
         drawOnChartArea: true,
       },
       title: {
-        display: true,
+        display: mixedBarLineDataProps.yLeftAxisTitle !== null,
         text: mixedBarLineDataProps.yLeftAxisTitle,
       },
       ticks: {
@@ -357,7 +360,7 @@ const options = computed(() => ({
         drawOnChartArea: false,
       },
       title: {
-        display: true,
+        display: mixedBarLineDataProps.yRightAxisTitle !== null,
         text: mixedBarLineDataProps.yRightAxisTitle,
       },
       ticks: {

package/src/components/radar/RadarChart.vue

@@ -219,6 +219,9 @@ const chartOptions: any = {
     title: {
       display: false,
     },
+    datalabels: {
+      display: false
+    },
     tooltip: {
       enabled: false,
       position: 'nearest' as const,

package/src/main.ts

@@ -3,5 +3,6 @@ import DoughnutChart from "./components/doughnut/DoughnutChart.vue";
 import LineChart from "./components/line/LineChart.vue";
 import RadarChart from "./components/radar/RadarChart.vue";
 import MixedBarLineChart from "./components/mixed/MixedBarLineChart.vue";
+import BubbleChart from "./components/bubble/BubbleChart.vue";
 
-export { BarChart, DoughnutChart, LineChart, RadarChart, MixedBarLineChart };
+export { BarChart, DoughnutChart, LineChart, RadarChart, MixedBarLineChart, BubbleChart };

package/src/plugin.ts

@@ -17,3 +17,4 @@ export { DoughnutChart } from "./components/doughnut";
 export { LineChart } from "./components/line";
 export { RadarChart } from "./components/radar";
 export { MixedBarLineChart } from "./components/mixed";
+export { BubbleChart } from "./components/bubble";

package/src/services/BarChartFunctions.ts

@@ -5,12 +5,14 @@ import {
 } from './ChartsCommonLegend';
 import PatternFunctions from './PatternFunctions';
 import { addAlpha } from './ColorFunctions';
+import {getVirtualNodeHeight} from 'mermaid/dist/diagrams/timeline/svgDraw';
 
 const { getPatternIndexWithShift } = PatternFunctions();
 
 interface Dataset {
-  data: any,
+  data: number[],
   label: any,
+  stack?: number,
 }
 
 export default function () {
@@ -22,8 +24,8 @@ export default function () {
   });
 
 
-  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility, patternsColors, patternsList);
+  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, enableHoverFeature: Ref<boolean>) {
+    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility,  patternsColors, patternsList, enableHoverFeature);
   }
   // Hack to force the chart to reload on Hover
   function reloadChart () {
@@ -34,18 +36,19 @@ export default function () {
   function getStackedDatasets (datasets: Dataset[], stackDatasets: boolean, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], patternShifting?: number) {
     // Hack to force refresh
     const borderWithValue = borderWidth.value;
-    return datasets.map((dataset, index) => {
+    return datasets.map((dataset, datasetIndex) => {
       return {
         borderColor: function (context: any) {
-          return disableAccessibility ? '#00000000' : getBorderColor(index, context.index, patternsColors, patternShifting);
+          return disableAccessibility ? '#00000000' : getBorderColor(datasetIndex, context.index, patternsColors, patternShifting);
         },
         backgroundColor: function (context: any) {
-          return getPattern(index, context.index, disableAccessibility, patternsColors, patternsList, patternShifting);
+          return getPattern(datasetIndex, context.index, disableAccessibility, patternsColors, patternsList, patternShifting);
         },
         borderWidth: function () {return disableAccessibility ? 1 : borderWithValue},
+
         data: dataset.data,
         label: dataset.label,
-        stack: `Stack ${stackDatasets ? '0' : index}`
+        stack: `Stack ${stackDatasets ? dataset.stack : datasetIndex}`
       };
     });
   }

package/src/services/BubbleTooltipService.ts

@@ -0,0 +1,65 @@
+import {Context, GenericTooltipService} from './GenericTooltipService';
+
+export type BubbleTooltipLine = {
+    label: string,
+    value: string,
+    unit: string,
+}
+const tooltipLineStyle = 'background: white; border-bottom: 1px solid #CCCCCC; border-radius: 5px; padding: 10px 20px';
+
+export class BubbleTooltipService extends GenericTooltipService {
+    fontProperties = 'font-family: Arial; font-size: 16px';
+
+    createBubbleTooltip(
+        context: Context,
+        lines: BubbleTooltipLine[],
+        title: string,
+    ) {
+        if(!title || title === ''){
+            return;
+        }
+        let tooltipEl = document.querySelector('#chartjs-tooltip') as HTMLElement | null;
+        if (!tooltipEl) {
+            tooltipEl = this.createNewTooltipElement();
+        }
+        const tooltipModel = context.tooltip;
+        if (tooltipModel.opacity === 0) {
+            tooltipEl.style.opacity = '0';
+            return;
+        }
+        if (tooltipModel.body) {
+            this.titleLines = tooltipModel.title || [];
+            const bodyLines = tooltipModel.body.map(this.getBody);
+            const body = bodyLines[0];
+            this.addBubbleLegendToDom(lines, body, tooltipEl, title);
+
+        }
+        this.handleTooltipPosition(context, tooltipModel, tooltipEl);
+    }
+
+    addBubbleLegendToDom(
+        lines: BubbleTooltipLine[],
+        body: Array<string>,
+        tooltipEl: HTMLElement,
+        title: string,
+    ) {
+        const legendText = body[0].split(':')[0];
+        const spanText = `<span style="${this.fontProperties}">${title}</span>`;
+        let innerHtml = `<div style="${tooltipLineStyle}; font-weight: bold" class="tooltipTitle">${spanText}</div>`;
+        const innerHtmlToAdd = this.getBubbleInnerHtml(lines);
+        innerHtml += innerHtmlToAdd;
+        const tableRoot = tooltipEl?.querySelector('.tooltipCtn') as HTMLElement;
+        tableRoot.innerHTML = innerHtml;
+    }
+
+    getBubbleInnerHtml(lines: BubbleTooltipLine[]): string {
+        let innerLinesHtml = '';
+        lines.forEach(line => {
+            innerLinesHtml += `<div style="${this.fontProperties}; ${tooltipLineStyle}; display:flex; justify-content: space-between;">`;
+            innerLinesHtml += `<div>${line.label}</div>`;
+            innerLinesHtml += `<div>${line.value}${line.unit}</div>`;
+            innerLinesHtml += `</div>`;
+        })
+        return `<div>${innerLinesHtml}</div>`;
+    }
+}

package/src/services/ChartsCommonLegend.ts

@@ -1,8 +1,8 @@
-import type { Ref } from 'vue';
-import type { HTMLLegendPlugin } from "../types/Chart";
-import type { ChartOptions } from 'chart.js';
+import type {Ref} from 'vue';
+import type {HTMLLegendPlugin} from "../types/Chart";
+import type {ChartOptions} from 'chart.js';
 import PatternFunctions from './PatternFunctions';
-import { formatValueAndRate } from './FormatUtilities';
+import {formatValueAndRate} from './FormatUtilities';
 import QuestionMarkSvg from '@mozaic-ds/icons/svg/Navigation_Notification_Question_24px.svg';
 
 const { getPatternCanvas } = PatternFunctions();
@@ -43,7 +43,7 @@ export interface ChartItem {
   lineCap?: string;
 }
 
-export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>,  onHoverIndex: any, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, maxValueToDisplay?: number, chartData?: any): HTMLLegendPlugin[] {
+export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>,  onHoverIndex: any, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, enableHoverFeature: Ref<boolean>, maxValueToDisplay?: number, chartData?: any): HTMLLegendPlugin[] {
   return [{
       id: 'htmlLegend',
       afterUpdate (chart: any) {
@@ -72,9 +72,9 @@ export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolea
           li.style.cursor = 'pointer';
           let liContent: HTMLElement;
           if (!selectMode.value) {
-            liContent = createLegendElementWithPatterns(item, chart, onHoverIndex, disableAccessibility.value, patternsColors.value, patternsList.value);
+            liContent = createLegendElementWithPatterns(item, chart, onHoverIndex, disableAccessibility.value, patternsColors.value, patternsList.value, enableHoverFeature.value);
           } else {
-            liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex, patternsColors.value);
+            liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex, patternsColors.value, enableHoverFeature.value);
           }
           liContent.style.boxSizing = 'border-box';
           li.appendChild(liContent);
@@ -108,6 +108,9 @@ export function createTooltipAndItsIcon (doughnutData: any, maxValueToDisplay: n
   icon.onmouseover = () => {
     (iconWrapper.firstElementChild as HTMLElement).style.visibility = 'visible';
   };
+  icon.onmouseleave = () => {
+    (iconWrapper.firstElementChild as HTMLElement).style.visibility = 'hidden';
+  };
   iconTopWrapper.appendChild(iconWrapper);
   iconWrapper.appendChild(tooltip);
   iconWrapper.appendChild(icon);
@@ -153,7 +156,7 @@ doughnutData.data.slice(startIndex).forEach((_ignore: any, index: number) => {
 }
 
 export function createLegendElementWithPatterns
-(item: ChartItem, chart: Chart, onHoverIndex: any | null, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[])
+(item: ChartItem, chart: Chart, onHoverIndex: any | null, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], enableHoverFeature: boolean)
   : HTMLElement {
     const isDoughnut: boolean = chart.config.type === 'doughnut';
     const index: number = isDoughnut ? item.index : item.datasetIndex;
@@ -167,38 +170,42 @@ export function createLegendElementWithPatterns
     boxSpan.style.borderColor = patternsColors[index];
     boxSpan.style.borderWidth = LEGEND_BOX_BORDER;
 
-    boxSpan.onmouseover = ():void => {
-      isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
-    };
-    boxSpan.onmouseleave = (): void => {
-      isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
-    };
+    if (enableHoverFeature) {
+      boxSpan.onmouseover = ():void => {
+        isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
+      };
+      boxSpan.onmouseleave = (): void => {
+        isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
+      };
+    }
     return boxSpan;
 }
 
 export function createLegendElementWithCheckbox
-(chart: Chart, item: ChartItem, selectMode: Ref<boolean>, onHoverIndex: any | null, patternsColors: string[]): HTMLElement {
+(chart: Chart, item: ChartItem, selectMode: Ref<boolean>, onHoverIndex: any | null, patternsColors: string[], enableHoverFeature: boolean): HTMLElement {
   const isDoughnut: boolean = chart.config.type === 'doughnut';
   const index: number = isDoughnut ? item.index : item.datasetIndex;
   const checkbox: HTMLElement = createLegendCheckbox(chart, item, patternsColors);
   const labels = chart.config.data.labels;
   const allCheckBoxesVisible: boolean =
     labels.every((label: string, index: number) => chart.getDataVisibility(index));
-  if (allCheckBoxesVisible) {
-    if (isDoughnut) {
-      selectMode.value = false;
-      onHoverIndex.value = -1;
+    if (allCheckBoxesVisible) {
+      if (isDoughnut) {
+        selectMode.value = false;
+        onHoverIndex.value = -1;
+      }
+      return checkbox;
     }
-    return checkbox;
+  if (enableHoverFeature) {
+    checkbox.onmouseover = ():void => {
+      isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
+      chart.update();
+    };
+    checkbox.onmouseleave = (): void => {
+      isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
+      chart.update();
+    };
   }
-  checkbox.onmouseover = ():void => {
-    isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
-    chart.update();
-  };
-  checkbox.onmouseleave = (): void => {
-    isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
-    chart.update();
-  };
   return checkbox;
 }
 
@@ -269,8 +276,8 @@ export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, ch
     //Default white for patterns chart
     backgroundColor = isDefaultWhiteColor(item.strokeStyle)? patternColor: item.strokeStyle;
     borderColor = isDefaultWhiteColor(item.strokeStyle)? patternColor: item.strokeStyle;
+    checkbox.setAttribute('checked', '' + isDataSetVisible);
   }
-  checkbox.setAttribute('checked', '' + isDataSetVisible);
   checkbox.setAttribute('class', 'mc-checkbox__input');
   checkbox.setAttribute('style', `background-color: ${backgroundColor};
     width: ${LEGEND_BOX_SIZE};
@@ -285,7 +292,7 @@ export function createLegendCheckbox (chart: Chart, item: ChartItem, patternsCol
   const checkbox = document.createElement('input');
   checkbox.setAttribute('type', 'checkbox');
   checkbox.setAttribute('data-test-id', `legend-checkbox-${index}`);
-  const isDataSetVisible = isDoughnut ? chart.getDataVisibility(index) :  chart.isDatasetVisible(index);
+  const isDataSetVisible = isChartDataVisible(chart, index);
   const patternColor = patternsColors? patternsColors[index]:undefined;
   addCheckboxStyle(isDataSetVisible, item, checkbox, patternColor as string);
   return checkbox;
@@ -320,17 +327,26 @@ function allDataVisible (chart: Chart): boolean {
   let allVisible = true;
   const chartsData: unknown[] = getChartsData(chart);
   chartsData.forEach((_data, dataIndex) => {
-    allVisible = allVisible && chart.isDatasetVisible(dataIndex);
+    allVisible = allVisible && isChartDataVisible(chart, dataIndex);
   });
   return allVisible;
 }
 
+function isChartDataVisible(chart: Chart, dataIndex: number): boolean {
+  if (isMonoDataSetChart(chart)) {
+    return chart.getDataVisibility(dataIndex);
+  } else {
+    return chart.isDatasetVisible(dataIndex);
+  }
+}
+
 export function switchItemVisibility (chart: Chart, elementIndex: number, selectMode?: Ref) {
   if (isMonoDataSetChart(chart)) {
     chart.toggleDataVisibility(elementIndex);
   } else {
     chart.setDatasetVisibility(elementIndex, !chart.isDatasetVisible(elementIndex));
   }
+
   if (selectMode && allDataVisible(chart)) {
     selectMode.value = false;
   }

package/src/services/DoughnutChartFunctions.ts

@@ -23,7 +23,8 @@ export default function () {
       ) => CanvasPattern)[]
     >,
     maxValueToDisplay: number,
-    doughnutData: any
+    doughnutData: any,
+    enableHoverFeature: Ref<boolean>
   ) {
     return getHtmlLegendPlugin(
       legendContainer,
@@ -32,6 +33,7 @@ export default function () {
       disableAccessibility,
       patternsColors,
       patternsList,
+      enableHoverFeature,
       maxValueToDisplay,
       doughnutData
     );
@@ -44,9 +46,10 @@ export default function () {
       color: string,
       disableAccessibility: boolean
     ) => CanvasPattern)[],
-    disableAccessibility: boolean
+    disableAccessibility: boolean,
+    enableHoverFeature: boolean
   ) {
-    if (onHoverIndex.value !== null) {
+    if (onHoverIndex.value !== null && enableHoverFeature) {
       return patternsList.map((pattern, index) =>
         onHoverIndex.value === index
           ? pattern(false, patternsColors[index], disableAccessibility)
@@ -59,8 +62,8 @@ export default function () {
     }
   }
 
-  function getBorderColor(patternsColors: string[]): string[] {
-    if (onHoverIndex.value !== null) {
+  function getBorderColor(patternsColors: string[], enableHoverFeature: boolean): string[] {
+    if (onHoverIndex.value !== null && enableHoverFeature) {
       return patternsColors.map((color, index) =>
         onHoverIndex.value === index ? color : addAlpha(color, 0.2)
       );

package/src/services/GenericTooltipService.ts

@@ -43,7 +43,8 @@ export type Context = {
         type?: string
       },
       dataIndex?: number,
-      datasetIndex?: number
+      datasetIndex?: number,
+      raw: any
     }[];
     opacity : number;
     body: {
@@ -148,7 +149,7 @@ export class GenericTooltipService {
     this.handleTooltipPosition(context, tooltipModel, tooltipEl);
   }
 
-  private handleTooltipPosition
+  protected handleTooltipPosition
   (context: Context, tooltipModel: { caretX: number, caretY: number }, tooltipEl: HTMLElement) {
     const position = context.chart.canvas.getBoundingClientRect();
     const screenWidth = window.innerWidth;
@@ -170,7 +171,7 @@ export class GenericTooltipService {
     }
   }
 
-  private createNewTooltipElement () {
+  protected createNewTooltipElement () {
     const tooltipEl = document.createElement('div');
     tooltipEl.id = 'chartjs-tooltip';
     tooltipEl.style.backgroundColor = 'white';
@@ -229,7 +230,7 @@ export class GenericTooltipService {
     patternsColors: string[],
     patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[],
     disableAccessibility: boolean = false,
-    datasetType?: string 
+    datasetType?: string
     ) {
       let innerHtml = innerHTMLtext;
       let legendImage = `<div class="legendIcon" style="${legendIconStyle}">`;
@@ -240,7 +241,7 @@ export class GenericTooltipService {
       innerHtml += innerHtmlToAdd;
       const tableRoot = tooltipEl?.querySelector('.tooltipCtn') as HTMLElement | null;
       if (tableRoot?.innerHTML != null) {
-        datasetType ? this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility, datasetType) 
+        datasetType ? this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility, datasetType)
         : this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility);
       }
     }

package/src/services/MixedBarLineFunctions.ts

@@ -76,7 +76,8 @@ export default function () {
                   { datasetIndex: -1 },
                   disableAccessibility.value,
                   patternsColors.value,
-                  patternsList.value
+                  patternsList.value,
+                  false
                 );
               }
             } else {
@@ -85,7 +86,8 @@ export default function () {
                 item,
                 selectMode,
                 { datasetIndex: -1 },
-                patternsColors.value
+                patternsColors.value,
+                false
               );
             }
             liContent.style.boxSizing = 'border-box';

package/src/types/AxisDefinition.ts

@@ -0,0 +1,6 @@
+export interface AxisDefinition {
+  title: string;
+  unit: string;
+}
+
+

package/src/types/BarData.ts

@@ -8,4 +8,5 @@ export interface BarData {
   label: string;
   backgroundColor?: string;
   data: DataBarData[];
+  stack?: number;
 }