@mozaic-ds/chart 0.1.0-beta.2 → 0.1.0-beta.23

package/src/services/ChartsCommonLegend.ts

@@ -1,16 +1,17 @@
-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();
 
 export const LEGEND_FONT_SIZE = 14;
 export const LEGEND_LABEL_LEFT_MARGIN = '6px';
-export const LEGEND_BOX_SIZE = 18;
+export const LEGEND_BOX_SIZE = '22px';
 export const LEGEND_BOX_POINT_SIZE = 6;
+export const LEGEND_BOX_BORDER = '2px';
 
 export interface Chart {
   update (): void;
@@ -31,17 +32,18 @@ export interface Chart {
 }
 
 export interface ChartItem {
-  fontColor: string,
-  hidden: boolean,
-  text: string,
-  fillStyle: string,
-  strokeStyle: string,
-  lineWidth: number
-  datasetIndex: number,
-  index: number
+  fontColor: string;
+  hidden: boolean;
+  text: string;
+  fillStyle: string;
+  strokeStyle: string;
+  lineWidth: number;
+  datasetIndex: number;
+  index: number;
+  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) {
@@ -64,16 +66,17 @@ export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolea
               li.style.position = 'relative';
             }
           } else {
-            li.style.marginRight = '12px'
+            li.style.marginRight = '10px'
           }
           li.style.width = 'max-content';
           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, disableAccessibility.value);
+            liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex, patternsColors.value, enableHoverFeature.value);
           }
+          liContent.style.boxSizing = 'border-box';
           li.appendChild(liContent);
           li.appendChild(createHtmlLegendItemText(item));
           if (isDoughnut && maxValueToDisplay && hasOthersTooltipToDisplay(chartData, maxValueToDisplay, index)) {
@@ -105,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);
@@ -150,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;
@@ -162,40 +168,44 @@ export function createLegendElementWithPatterns
     boxSpan.style.background = `url(${img.src})`;
     boxSpan.style.backgroundSize = 'cover';
     boxSpan.style.borderColor = patternsColors[index];
-    boxSpan.style.borderWidth = '2px';
-
-    boxSpan.onmouseover = ():void => {
-      isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
-    };
-    boxSpan.onmouseleave = (): void => {
-      isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = null;
-    };
+    boxSpan.style.borderWidth = LEGEND_BOX_BORDER;
+
+    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, disableAccessibility: boolean): 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, disableAccessibility);
+  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) {
-      onHoverIndex.value = -1;
-      selectMode.value = false;
-    } else {
-      onHoverIndex.dataSetIndex = -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;
-  };
-  checkbox.onmouseleave = (): void => {
-    isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = null;
-  };
   return checkbox;
 }
 
@@ -214,18 +224,18 @@ export function createHtmlLegendItemText (item: ChartItem) {
 export function createHtmlLegendLine (item: ChartItem, type: string | undefined) {
   const boxSpan = document.createElement('div');
   if (type !== 'doughnut') {
-    boxSpan.style.background = item.fillStyle;
+    boxSpan.style.background = 'rgba(0, 0, 0, 0.1)';
     boxSpan.style.borderColor = item.strokeStyle;
-    boxSpan.style.borderWidth = item.lineWidth + 'px';
+    boxSpan.style.borderWidth = LEGEND_BOX_BORDER;
   }
   boxSpan.style.borderRadius = '5px';
   boxSpan.style.borderStyle = 'solid';
   boxSpan.style.display = 'flex';
   boxSpan.style.justifyContent = 'center';
   boxSpan.style.alignItems = 'center';
-  boxSpan.style.width = LEGEND_BOX_SIZE + 'px';
+  boxSpan.style.width = LEGEND_BOX_SIZE;
   boxSpan.style.marginRight = LEGEND_LABEL_LEFT_MARGIN;
-  boxSpan.style.height = LEGEND_BOX_SIZE + 'px';
+  boxSpan.style.height = LEGEND_BOX_SIZE;
   return boxSpan;
 }
 
@@ -236,7 +246,7 @@ export function createHtmlLegendDatasetSquare (item: ChartItem) {
   divPoint.style.background = 'white';
   divPoint.style.borderStyle = 'solid';
   divPoint.style.borderColor = item.strokeStyle;
-  divPoint.style.borderWidth = item.lineWidth + 'px';
+  divPoint.style.borderWidth = LEGEND_BOX_BORDER;
   return divPoint;
 }
 
@@ -259,30 +269,32 @@ export function createHtmlLegendListElement
   return li;
 }
 
-export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, checkbox: Element, disableAccessibility: boolean) {
+export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, checkbox: Element, patternColor: string) {
   let backgroundColor = '#fff';
   let borderColor = '#666';
   if (isDataSetVisible) {
-    backgroundColor = disableAccessibility? item.fillStyle : item.strokeStyle;
-    borderColor = item.strokeStyle;
+    //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 + 4 + 'px'};
-    height: ${LEGEND_BOX_SIZE + 4 + 'px'};
+    width: ${LEGEND_BOX_SIZE};
+    height: ${LEGEND_BOX_SIZE};
     margin-right: ${LEGEND_LABEL_LEFT_MARGIN};
     border-color: ${borderColor};`);
 }
 
-export function createLegendCheckbox (chart: Chart, item: ChartItem, disableAccessibility: boolean = false) {
+export function createLegendCheckbox (chart: Chart, item: ChartItem, patternsColors: string[]) {
   const isDoughnut: boolean = chart.config.type === 'doughnut';
   const index: number = isDoughnut ? item.index : item.datasetIndex;
   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);
-  addCheckboxStyle(isDataSetVisible, item, checkbox, disableAccessibility);
+  const isDataSetVisible = isChartDataVisible(chart, index);
+  const patternColor = patternsColors? patternsColors[index]:undefined;
+  addCheckboxStyle(isDataSetVisible, item, checkbox, patternColor as string);
   return checkbox;
 }
 
@@ -315,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;
   }
@@ -333,11 +354,14 @@ export function switchItemVisibility (chart: Chart, elementIndex: number, select
 }
 
 
-export function createLegendElementWithSquareArea (item: ChartItem, mainSerieFirstDataset?: boolean) {
+export function createLegendElementWithSquareArea (item: ChartItem, mainSerieFirstDataset?: boolean,) {
   const liContent = createHtmlLegendLine(item, '');
   const divPoint = createHtmlLegendDatasetSquare(item);
   const index = item.index || item.datasetIndex;
-  if (index === 0) {
+
+  divPoint.style.width = '10px';
+  divPoint.style.height = '10px';
+  if (index % 2 === 0) {
     mainSerieFirstDataset ? divPoint.style.borderRadius = '25px' : divPoint.style.transform = 'rotate(45deg)';
   } else {
     mainSerieFirstDataset ? divPoint.style.transform = 'rotate(45deg)' : divPoint.style.borderRadius = '25px';
@@ -359,3 +383,7 @@ export function getOrCreateLegendList (legendContainer: Ref, flexDirection: stri
   }
   return listContainer;
 }
+
+function isDefaultWhiteColor(color: string){
+  return color === '#00000000';
+}

package/src/services/DoughnutChartFunctions.ts

@@ -1,85 +1,133 @@
-import { ref } from 'vue';
-import type { Ref } from 'vue';
-import {
-  getHtmlLegendPlugin
-} from '../services/ChartsCommonLegend';
-import { formatWithThousandsSeprators } from '../services/FormatUtilities';
+import { ref } from "vue";
+import type { Ref } from "vue";
+import { getHtmlLegendPlugin } from "../services/ChartsCommonLegend";
+import { formatWithThousandsSeprators } from "../services/FormatUtilities";
 
-import ChartDesign from './patterns/ChartDesign';
-import {addAlpha} from './ColorFunctions';
+import { addAlpha } from "./ColorFunctions";
 
 export default function () {
   const doughnutRef: Ref = ref(null);
   const onHoverIndex: Ref<number | null> = ref(null);
   const backgroundColor: Ref<CanvasPattern[] | null> = ref(null);
 
-  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, maxValueToDisplay: number, doughnutData: any) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility, patternsColors, patternsList, maxValueToDisplay, doughnutData);
+  function privateGetHtmlLegendPlugin(
+    legendContainer: Ref,
+    selectMode: Ref<boolean>,
+    disableAccessibility: Ref<boolean>,
+    patternsColors: Ref<string[]>,
+    patternsList: Ref<
+      ((
+        hover: boolean,
+        color: string,
+        disableAccessibility: boolean
+      ) => CanvasPattern)[]
+    >,
+    maxValueToDisplay: number,
+    doughnutData: any,
+    enableHoverFeature: Ref<boolean>
+  ) {
+    return getHtmlLegendPlugin(
+      legendContainer,
+      selectMode,
+      onHoverIndex,
+      disableAccessibility,
+      patternsColors,
+      patternsList,
+      enableHoverFeature,
+      maxValueToDisplay,
+      doughnutData
+    );
   }
 
-
-  function getBackgroundColor(patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean) {
-    if (onHoverIndex.value !== null) {
-      return patternsList
-          .map((pattern, index) => onHoverIndex.value === index ? pattern(false, patternsColors[index], disableAccessibility) : pattern(true, patternsColors[index], disableAccessibility));
+  function getBackgroundColor(
+    patternsColors: string[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    disableAccessibility: boolean,
+    enableHoverFeature: boolean
+  ) {
+    if (onHoverIndex.value !== null && enableHoverFeature) {
+      return patternsList.map((pattern, index) =>
+        onHoverIndex.value === index
+          ? pattern(false, patternsColors[index], disableAccessibility)
+          : pattern(true, patternsColors[index], disableAccessibility)
+      );
     } else {
-      return patternsList
-          .map((pattern, index) => pattern(false, patternsColors[index], disableAccessibility),);
+      return patternsList.map((pattern, index) =>
+        pattern(false, patternsColors[index], disableAccessibility)
+      );
     }
   }
 
-  function getBorderColor(patternsColors: string[]): string[] {
-    if (onHoverIndex.value !== null) {
-      return patternsColors.map((color, index) => onHoverIndex.value === index ? color : addAlpha(color, 0.2));
+  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)
+      );
     } else {
       return patternsColors;
     }
   }
 
+  function getOnHoverOptions() {
+    return (_ignore: unknown, activeElements: Array<any>): void => {
+      if (activeElements[0] !== undefined) {
+        onHoverIndex.value = activeElements[0].element.$context.index;
+      } else {
+        onHoverIndex.value = null;
+      }
+    };
+  }
 
-  function getOnHoverOptions () {
-  return (_ignore: unknown, activeElements: Array<any>): void => {
-    if (activeElements[0] !== undefined) {
-      onHoverIndex.value = activeElements[0].element.$context.index;
-    } else {
-      onHoverIndex.value = null;
-    }
+  const getFormatedText = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
   };
- }
-
-const getFormatedText = (str: string) => {
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-};
 
-function getDoughnutLabels(labels: string[], data: any[], maxValues: number) {
-  let truncatedLabels = labels.slice(0);
-  let truncatedData = data.slice(0);
-  if (labels.length > maxValues){
-    truncatedData = groupDataAfterNthValue(data, maxValues);
-    truncatedLabels = truncatedLabels.slice(0, maxValues - 1);
-    truncatedLabels.push('others');
+  function getDoughnutLabels(
+    labels: string[],
+    data: any[],
+    maxValues: number,
+    othersLabel: string
+  ) {
+    let truncatedLabels = labels.slice(0);
+    let truncatedData = data.slice(0);
+    if (labels.length > maxValues) {
+      truncatedData = groupDataAfterNthValue(data, maxValues);
+      truncatedLabels = truncatedLabels.slice(0, maxValues - 1);
+      truncatedLabels.push(othersLabel);
+    }
+    return truncatedLabels.map(
+      (label: string, index: number) =>
+        `${getFormatedText(label)} (${formatWithThousandsSeprators(
+          truncatedData[index].rate as number
+        )} %)`
+    );
   }
-  return truncatedLabels.map((label: string, index: number) => `${getFormatedText(label)} (${formatWithThousandsSeprators(truncatedData[index].rate as number)} %)`);
-}
 
-function groupDataAfterNthValue (data: any, maxValues: number): any[] {
-  if (maxValues < 1) {
-    return data;
-  }
-  let truncatedData = data.slice(0);
-  if (data.length > maxValues) {
-    truncatedData = truncatedData.slice(0, maxValues);
-    truncatedData[maxValues - 1] = data.slice(maxValues).reduce((result: any, current: any) => {
-      result.rate += current.rate;
-      result.value += current.value;
-      return result;
-    }, {
-      rate: data[maxValues - 1].rate,
-      value: data[maxValues - 1].value
-    });
+  function groupDataAfterNthValue(data: any, maxValues: number): any[] {
+    if (maxValues < 1) {
+      return data;
+    }
+    let truncatedData = data.slice(0);
+    if (data.length > maxValues) {
+      truncatedData = truncatedData.slice(0, maxValues);
+      truncatedData[maxValues - 1] = data.slice(maxValues).reduce(
+        (result: any, current: any) => {
+          result.rate += current.rate;
+          result.value += current.value;
+          return result;
+        },
+        {
+          rate: data[maxValues - 1].rate,
+          value: data[maxValues - 1].value,
+        }
+      );
+    }
+    return truncatedData;
   }
-  return truncatedData;
-}
 
   return {
     onHoverIndex,
@@ -91,6 +139,6 @@ function groupDataAfterNthValue (data: any, maxValues: number): any[] {
     getFormatedText,
     getBorderColor,
     backgroundColor,
-    doughnutRef
+    doughnutRef,
   };
 }

package/src/services/FormatUtilities.ts

@@ -1,4 +1,4 @@
-export function formatTicks (val: number, unit?: string | null): string {
+export function formatTicks (val: number, unit?: string): string {
   const fixedValue = parseInt(val.toFixed());
   return `${new Intl.NumberFormat().format(fixedValue)}${unit ? ' ' + unit : ''}`;
 }

package/src/services/GenericTooltipService.ts

@@ -39,8 +39,12 @@ export type Context = {
   replay?: unknown;
   tooltip: {
     dataPoints: {
+      dataset?: {
+        type?: string
+      },
       dataIndex?: number,
-      datasetIndex?: number
+      datasetIndex?: number,
+      raw: any
     }[];
     opacity : number;
     body: {
@@ -110,6 +114,7 @@ export class GenericTooltipService {
       const body = this.chartType === 'DOUGHNUT' ? [tooltipModel.title[0].split('(')[0].trim()]: bodyLines[0];
       let legendIconStyle = '';
       let legendInnerStyle = '';
+      const datasetType = context.tooltip?.dataPoints[0]?.dataset?.type;
 
       if (this.chartType === 'RADAR' || this.chartType === 'LINE_CHART') {
         legendIconStyle = this.createLegendStyle(context);
@@ -118,6 +123,13 @@ export class GenericTooltipService {
                  this.chartType === 'DETAILS_BAR_CHART' ||
                  this.chartType === 'DOUGHNUT') {
         legendIconStyle = this.createPatternLegendStyle(context);
+      } else if (this.chartType === 'MIXED_BAR_LINE_CHART') {
+        if (datasetType === 'bar') {
+          legendIconStyle = this.createPatternLegendStyle(context);
+        } else {
+          legendIconStyle = this.createLegendStyle(context);
+          legendInnerStyle = this.createLegendInnerStyle(context);
+        }
       }
 
       this.addLegendToDom(
@@ -129,14 +141,15 @@ export class GenericTooltipService {
         tooltipEl,
         patternsColors,
         patternsList,
-        disableAccessibility
+        disableAccessibility,
+        datasetType
       );
     }
 
     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;
@@ -158,7 +171,7 @@ export class GenericTooltipService {
     }
   }
 
-  private createNewTooltipElement () {
+  protected createNewTooltipElement () {
     const tooltipEl = document.createElement('div');
     tooltipEl.id = 'chartjs-tooltip';
     tooltipEl.style.backgroundColor = 'white';
@@ -188,7 +201,8 @@ export class GenericTooltipService {
     style += ';margin-right: 10px';
     style += ';display: flex';
     style += ';align-items: center';
-    style += ';justify-content: center;';
+    style += ';justify-content: center';
+    style += ';background: rgba(0, 0, 0, 0.1);';
     return style;
   }
 
@@ -215,7 +229,8 @@ export class GenericTooltipService {
     tooltipEl: HTMLElement,
     patternsColors: string[],
     patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[],
-    disableAccessibility: boolean = false
+    disableAccessibility: boolean = false,
+    datasetType?: string
     ) {
       let innerHtml = innerHTMLtext;
       let legendImage = `<div class="legendIcon" style="${legendIconStyle}">`;
@@ -225,9 +240,9 @@ export class GenericTooltipService {
       const innerHtmlToAdd = this.setInnerHtmlToAdd(body, style, legendImage);
       innerHtml += innerHtmlToAdd;
       const tableRoot = tooltipEl?.querySelector('.tooltipCtn') as HTMLElement | null;
-
       if (tableRoot?.innerHTML != null) {
-        this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility);
+        datasetType ? this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility, datasetType)
+        : this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility);
       }
     }
 
@@ -285,7 +300,7 @@ export class GenericTooltipService {
   }
 
 
-  setInnerHtmlAndPattern(tableRoot: HTMLElement, innerHtml: string, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean = false) {
+  setInnerHtmlAndPattern(tableRoot: HTMLElement, innerHtml: string, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean = false, datasetType?: string) {
     tableRoot.innerHTML = innerHtml;
     const legendIconHtml = document.querySelector('.legendIcon') as HTMLElement;
     const img: HTMLImageElement = new Image();
@@ -298,7 +313,7 @@ export class GenericTooltipService {
       index = this.datasetIndex + 1;
     }
     const patternIndex = getPatternIndexWithShift(index, this.patternShifting);
-    if (this.chartType !== 'LINE_CHART' && this.chartType !== 'RADAR') {
+    if (this.chartType !== 'LINE_CHART' && this.chartType !== 'RADAR' && datasetType !== 'line') {
       const pattern: CanvasPattern = patternsList[patternIndex - 1](false, patternsColors[patternIndex - 1], disableAccessibility);
       const patternCanvas: HTMLCanvasElement = getPatternCanvas(pattern, 22, 22);
       img.src = patternCanvas.toDataURL();