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

package/src/components/radar/RadarChart.vue

@@ -22,10 +22,11 @@ import type { Area } from '../../types/RadarData';
 import { Radar } from 'vue-chartjs';
 import type { ActiveElement, ChartData } from 'chart.js';
 import {Context, GenericTooltipService} from '../../services/GenericTooltipService';
-import { formatWithThousandsSeprators } from '../../services/FormatUtilities';
+import { formatWithThousandsSeprators, numberWithThousandSeparators } from '../../services/FormatUtilities';
 import { TooltipChartType } from '../../types/TooltipChartType';
 import { drawLabels } from '../../services/RadarChartFunctions';
 import type { Chart, ChartItem } from '../../services/ChartsCommonLegend';
+import { addAlpha } from '../../services/ColorFunctions'
 import {
   Chart as ChartJS,
   Filler,
@@ -48,6 +49,8 @@ import {
   switchItemVisibility
 } from '../../services/ChartsCommonLegend';
 
+import ChartDesign from '../../services/patterns/ChartDesign';
+
 ChartJS.register(
   Title,
   Tooltip,
@@ -57,6 +60,12 @@ ChartJS.register(
   PointElement,
   Filler,
 );
+
+const {
+  colourSets,
+  patternsStandardList
+  } = ChartDesign();
+
 const radarComponentChartProps = defineProps({
     chartId: {
       type: String,
@@ -70,6 +79,27 @@ const radarComponentChartProps = defineProps({
     type: Array as PropType<string[]>,
     default: () => []
     },
+    // disable accessibility patterns
+    disableAccessibility: {
+      type: Boolean,
+      default: false
+    },
+    // colourSet props is used to choose the colour set of the charts as defined in the Figma prototypes.
+    // 7 colour sets are currently defined :
+    // - Default 0 corresponds to the current one
+    // - 1 to 6 corresponds to the "new" colour sets : https://www.figma.com/file/Hn6PyvnR385Ta0XN3KqOI9/04.-Dataviz---Documentation-(read-only)?type=design&node-id=1-69316&mode=design&t=sDytQ5BipsryWkuA-0
+    // Remark : All the sets are defined in /src/services/patterns/ChartDesign.ts
+    colourSet: {
+      type: Number,
+      default: 0
+    },
+    // 6 patterns exist and are not randomly given but follow the order defined in patternsStandardList /src/services/patterns/ChartDesign.ts 
+    // Additionally, a pattern has only one possible colour per colour set as defined in the Figma prototype.
+    // In some use cases, the chart may need to show a different orders of these patterns, this can be changed using the props newPatternsOrder
+    newPatternsOrder: {
+      type: Array as PropType<number[]>,
+      default: () => [0,1,2,3,4,5]
+    },
     areas: {
       type: Array as PropType<Area[]>,
       default: () => []
@@ -87,36 +117,47 @@ const radarComponentChartProps = defineProps({
       default: () => [],
     },
 })
+
+const patternsColors = computed(() => radarComponentChartProps.newPatternsOrder.length !== 6
+  ? colourSets[radarComponentChartProps.colourSet]
+  : radarComponentChartProps.newPatternsOrder.map((id)=> {return colourSets[radarComponentChartProps.colourSet][id]})
+)
+
+const patternsOrderedList = computed(() => radarComponentChartProps.newPatternsOrder.length !== 6
+  ? patternsStandardList
+  : radarComponentChartProps.newPatternsOrder.map((id)=> {return patternsStandardList[id]})
+)
+
 const radarData = computed<ChartData<'radar'>>(() => ({
   labels: getRadarLabels(),
   datasets: [
     {
       label: 'Data One',
-      backgroundColor: '#BFE3E760',
-      borderColor: '#0192A0',
-      pointBackgroundColor: '#0192A000',
-      pointBorderColor: '#0192A0',
+      backgroundColor: addAlpha(patternsColors.value[0], 0.1),
+      borderColor: patternsColors.value[0],
+      pointBackgroundColor:  '#FFFFFF',
+      pointBorderColor: patternsColors.value[0],
       pointBorderWidth: 2,
       borderWidth: 2,
       pointHitRadius: 55,
       pointRadius: 5,
-      pointHoverBackgroundColor: '#0192A0',
-      pointHoverBorderColor: '#0192A0',
+      pointHoverBackgroundColor: patternsColors.value[0],
+      pointHoverBorderColor: patternsColors.value[0],
       data: radarComponentChartProps.areas[0].areaData.map((x: { position: number }) => x.position)
     },
     {
       label: 'Data Two',
-      backgroundColor: 'rgba(231, 231, 240, .6)',
-      borderColor: '#605F9D',
-      pointBackgroundColor: 'rgba(231, 231, 240, .6)',
-      pointBorderColor: '#605F9D',
+      backgroundColor: addAlpha(patternsColors.value[1], 0.1),
+      borderColor: patternsColors.value[1],
+      pointBackgroundColor: '#FFFFFF',
+      pointBorderColor: patternsColors.value[1],
       pointBorderWidth: 2,
       borderWidth: 2,
       pointHitRadius: 55,
       pointRadius: 5,
       pointStyle: 'rectRot',
-      pointHoverBackgroundColor: '#605F9D',
-      pointHoverBorderColor: '#605F9D',
+      pointHoverBackgroundColor: patternsColors.value[1],
+      pointHoverBorderColor: patternsColors.value[1],
       data: radarComponentChartProps.areas[1].areaData.map((x: { position: number }) => x.position)
     }
   ]
@@ -145,7 +186,10 @@ const chartOptions: any = {
         new GenericTooltipService().createTooltip(
           context,
           getTooltipData,
-          { chartType: TooltipChartType.RADAR }
+          { chartType: TooltipChartType.RADAR },
+          patternsColors.value,
+          patternsOrderedList.value,
+          radarComponentChartProps.disableAccessibility
         );
       }
     }
@@ -220,7 +264,7 @@ const radarPlugins = [{
       let liContent;
       li.style.marginRight = '0.625rem';
       if (!selectMode.value) {
-        liContent = createLegendElementWithSquareArea(item);
+        liContent = createLegendElementWithSquareArea(item, true);
       } else {
         liContent = createLegendElementWithCheckbox(chart, item);
       }

package/src/components/radar/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import RadarChart from "./RadarChart.vue";
+
+RadarChart.install = (app: App) => {
+  app.component("RadarChart", RadarChart);
+};
+
+export { RadarChart };

package/src/plugin.ts

@@ -0,0 +1,18 @@
+import type { App } from "vue";
+import * as Components from "./components";
+
+const MozaicChart = {
+  install: (app: App, options: {}) => {
+    Object.keys(Components).forEach((name) => {
+      // @ts-ignore
+      app.component(name, Components[name]);
+    });
+  },
+};
+
+export default MozaicChart;
+
+export { BarChart } from "./components/bar";
+export { DoughnutChart } from "./components/doughnut";
+export { LineChart } from "./components/line";
+export { RadarChart } from "./components/radar";

package/src/services/BarChartFunctions.ts

@@ -4,14 +4,9 @@ import {
   getHtmlLegendPlugin
 } from './ChartsCommonLegend';
 import PatternFunctions from './PatternFunctions';
-import ChartDesign from './patterns/ChartDesign';
+import { addAlpha } from './ColorFunctions';
 
 const { getPatternIndexWithShift } = PatternFunctions();
-const {
-  patternsColors,
-  patternsColorsLowerOpacity,
-  patternsStandardList
-} = ChartDesign();
 
 interface Dataset {
   data: any,
@@ -27,8 +22,8 @@ export default function () {
   });
 
 
-  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex);
+  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);
   }
   // Hack to force the chart to reload on Hover
   function reloadChart () {
@@ -36,16 +31,18 @@ export default function () {
     borderWidth.value = 3;
   }
 
-  function getStackedDatasets (datasets: Dataset[], stackDatasets: boolean, patternShifting?: number) {
+  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 {
         borderColor: function (context: any) {
-          return getBorderColor(index, context.index, patternShifting);
+          return disableAccessibility ? '#00000000' : getBorderColor(index, context.index, patternsColors, patternShifting);
         },
         backgroundColor: function (context: any) {
-          return getPattern(index, context.index, patternShifting);
+          return getPattern(index, context.index, disableAccessibility, patternsColors, patternsList, patternShifting);
         },
-        borderWidth: borderWidth.value,
+        borderWidth: function () {return disableAccessibility ? 1 : borderWithValue},
         data: dataset.data,
         label: dataset.label,
         stack: `Stack ${stackDatasets ? '0' : index}`
@@ -53,26 +50,25 @@ export default function () {
     });
   }
 
-  function getDatasets (firstDataSet: Dataset, secondDataSet: Dataset) {
-    const getStacked = getStackedDatasets([firstDataSet, secondDataSet], false);
-    return getStacked;
+  function getDatasets (firstDataSet: Dataset, secondDataSet: Dataset,  patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean) {
+    return getStackedDatasets([firstDataSet, secondDataSet], false, disableAccessibility, patternsColors, patternsList);
   }
 
-  function getBorderColor (dataSetIndex: number, contextIndex: number, patternShifting?: number) {
+  function getBorderColor (dataSetIndex: number, contextIndex: number, patternsColors: string[], patternShifting?: number) {
     const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
     if (displayFullOpacity(dataSetIndex, contextIndex)) {
       return patternsColors[index];
     } else {
-      return patternsColorsLowerOpacity[index];
+      return addAlpha(patternsColors[index],0.2);
     }
   }
 
-  function getPattern (dataSetIndex: number, contextIndex: number, patternShifting?: number) {
+  function getPattern (dataSetIndex: number, contextIndex: number, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], patternShifting?: number) {
     const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
     if (displayFullOpacity(dataSetIndex, contextIndex)) {
-      return patternsStandardList[index](false);
+      return patternsList[index](false, patternsColors[index], disableAccessibility);
     } else {
-      return patternsStandardList[index](true);
+      return patternsList[index](true, patternsColors[index], disableAccessibility);
     }
   }
 

package/src/services/ChartsCommonLegend.ts

@@ -1,15 +1,10 @@
 import type { Ref } from 'vue';
 import type { HTMLLegendPlugin } from "../types/Chart";
 import type { ChartOptions } from 'chart.js';
-import ChartDesign from './patterns/ChartDesign';
 import PatternFunctions from './PatternFunctions';
 import { formatValueAndRate } from './FormatUtilities';
 import QuestionMarkSvg from '@mozaic-ds/icons/svg/Navigation_Notification_Question_24px.svg';
 
-const {
-  patternsColors,
-  patternsStandardList
-} = ChartDesign();
 const { getPatternCanvas } = PatternFunctions();
 
 export const LEGEND_FONT_SIZE = 14;
@@ -46,7 +41,7 @@ export interface ChartItem {
   index: number
 }
 
-export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>,  onHoverIndex: any, 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)[]>, maxValueToDisplay?: number, chartData?: any): HTMLLegendPlugin[] {
   return [{
       id: 'htmlLegend',
       afterUpdate (chart: any) {
@@ -71,13 +66,13 @@ export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolea
           } else {
             li.style.marginRight = '12px'
           }
-          li.style.width = 'max-content';  
-          li.style.cursor = 'pointer';  
+          li.style.width = 'max-content';
+          li.style.cursor = 'pointer';
           let liContent: HTMLElement;
           if (!selectMode.value) {
-            liContent = createLegendElementWithPatterns(item, chart, onHoverIndex);
+            liContent = createLegendElementWithPatterns(item, chart, onHoverIndex, disableAccessibility.value, patternsColors.value, patternsList.value);
           } else {
-            liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex);
+            liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex, disableAccessibility.value);
           }
           li.appendChild(liContent);
           li.appendChild(createHtmlLegendItemText(item));
@@ -155,13 +150,13 @@ doughnutData.data.slice(startIndex).forEach((_ignore: any, index: number) => {
 }
 
 export function createLegendElementWithPatterns
-(item: ChartItem, chart: Chart, onHoverIndex: any | null)
+(item: ChartItem, chart: Chart, onHoverIndex: any | null, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[])
   : HTMLElement {
     const isDoughnut: boolean = chart.config.type === 'doughnut';
     const index: number = isDoughnut ? item.index : item.datasetIndex;
     const img: HTMLImageElement = new Image();
     const boxSpan: HTMLElement = createHtmlLegendLine(item, chart.config.type);
-    const pattern: CanvasPattern = patternsStandardList[index](false);
+    const pattern: CanvasPattern = patternsList[index](false, patternsColors[index], disableAccessibility);
     const patternCanvas: HTMLCanvasElement = getPatternCanvas(pattern);
     img.src = patternCanvas.toDataURL();
     boxSpan.style.background = `url(${img.src})`;
@@ -176,16 +171,16 @@ export function createLegendElementWithPatterns
       isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = null;
     };
     return boxSpan;
-} 
+}
 
-export function createLegendElementWithCheckbox 
-(chart: Chart, item: ChartItem, selectMode: Ref<boolean>, onHoverIndex: any | null): HTMLElement {
+export function createLegendElementWithCheckbox
+(chart: Chart, item: ChartItem, selectMode: Ref<boolean>, onHoverIndex: any | null, disableAccessibility: boolean): HTMLElement {
   const isDoughnut: boolean = chart.config.type === 'doughnut';
   const index: number = isDoughnut ? item.index : item.datasetIndex;
-  const checkbox: HTMLElement = createLegendCheckbox(chart, item);
+  const checkbox: HTMLElement = createLegendCheckbox(chart, item, disableAccessibility);
   const labels = chart.config.data.labels;
-  const allCheckBoxesVisible: boolean = 
-  labels.every((label: string, index: number) => chart.getDataVisibility(index));
+  const allCheckBoxesVisible: boolean =
+    labels.every((label: string, index: number) => chart.getDataVisibility(index));
   if (allCheckBoxesVisible) {
     if (isDoughnut) {
       onHoverIndex.value = -1;
@@ -264,11 +259,11 @@ export function createHtmlLegendListElement
   return li;
 }
 
-export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, checkbox: Element) {
+export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, checkbox: Element, disableAccessibility: boolean) {
   let backgroundColor = '#fff';
   let borderColor = '#666';
   if (isDataSetVisible) {
-    backgroundColor = item.strokeStyle;
+    backgroundColor = disableAccessibility? item.fillStyle : item.strokeStyle;
     borderColor = item.strokeStyle;
   }
   checkbox.setAttribute('checked', '' + isDataSetVisible);
@@ -280,14 +275,14 @@ export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, ch
     border-color: ${borderColor};`);
 }
 
-export function createLegendCheckbox (chart: Chart, item: ChartItem) {
+export function createLegendCheckbox (chart: Chart, item: ChartItem, disableAccessibility: boolean = false) {
   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);
+  addCheckboxStyle(isDataSetVisible, item, checkbox, disableAccessibility);
   return checkbox;
 }
 
@@ -338,14 +333,14 @@ export function switchItemVisibility (chart: Chart, elementIndex: number, select
 }
 
 
-export function createLegendElementWithSquareArea (item: ChartItem) {
+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.borderRadius = '25px';
+    mainSerieFirstDataset ? divPoint.style.borderRadius = '25px' : divPoint.style.transform = 'rotate(45deg)';
   } else {
-    divPoint.style.transform = 'rotate(45deg)';
+    mainSerieFirstDataset ? divPoint.style.transform = 'rotate(45deg)' : divPoint.style.borderRadius = '25px';
   }
   liContent.appendChild(divPoint);
   return liContent;

package/src/services/ColorFunctions.ts

@@ -0,0 +1,4 @@
+export function addAlpha(color: string, opacity: number) {
+  const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
+  return color + _opacity.toString(16).toUpperCase();
+}

package/src/services/DoughnutChartFunctions.ts

@@ -1,37 +1,43 @@
 import { ref } from 'vue';
 import type { Ref } from 'vue';
-import { 
+import {
   getHtmlLegendPlugin
 } from '../services/ChartsCommonLegend';
 import { formatWithThousandsSeprators } from '../services/FormatUtilities';
 
 import ChartDesign from './patterns/ChartDesign';
-
-const {
-  patternsStandardList
-} = ChartDesign();
-
+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>, maxValueToDisplay: number, doughnutData: any) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, 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) {
+    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility, patternsColors, patternsList, maxValueToDisplay, doughnutData);
   }
 
-function getBackgroundColor(): void {
-  if (onHoverIndex.value !== null) {
-    backgroundColor.value = patternsStandardList
-      .map((pattern, index) => onHoverIndex.value === index ? pattern(false) : pattern(true));
-  } else {
-    backgroundColor.value = patternsStandardList
-      .map((pattern) => pattern(false));
+
+  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));
+    } else {
+      return patternsList
+          .map((pattern, index) => pattern(false, patternsColors[index], disableAccessibility),);
+    }
   }
-}
 
- function getOnHoverOptions () {
+  function getBorderColor(patternsColors: string[]): string[] {
+    if (onHoverIndex.value !== null) {
+      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;
@@ -83,6 +89,7 @@ function groupDataAfterNthValue (data: any, maxValues: number): any[] {
     getDoughnutLabels,
     getBackgroundColor,
     getFormatedText,
+    getBorderColor,
     backgroundColor,
     doughnutRef
   };

package/src/services/GenericTooltipService.ts

@@ -1,12 +1,8 @@
 import type { TooltipChartType } from '../types/TooltipChartType';
 import { getPatternIndexWithShift } from './FormatUtilities';
 import PatternsFunctions from '../services/PatternFunctions';
-import ChartDesign from './patterns/ChartDesign';
 
 const { getPatternCanvas } = PatternsFunctions();
-const {
-  patternsStandardList
-} = ChartDesign();
 
 type BodyItem = {
   after: string[];
@@ -74,7 +70,11 @@ export class GenericTooltipService {
   createTooltip (
     context: Context,
     retrieveData : (context: Context) => string,
-    tooltipInputElements: TooltipElements) {
+    tooltipInputElements: TooltipElements,
+    patternsColors: string[],
+    patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[],
+    disableAccessibility: boolean = false,
+    ) {
     if (!context.tooltip.dataPoints) {
       return;
     }
@@ -126,14 +126,17 @@ export class GenericTooltipService {
         legendInnerStyle,
         body,
         style,
-        tooltipEl
+        tooltipEl,
+        patternsColors,
+        patternsList,
+        disableAccessibility
       );
     }
 
     this.handleTooltipPosition(context, tooltipModel, tooltipEl);
   }
 
-  private handleTooltipPosition 
+  private handleTooltipPosition
   (context: Context, tooltipModel: { caretX: number, caretY: number }, tooltipEl: HTMLElement) {
     const position = context.chart.canvas.getBoundingClientRect();
     const screenWidth = window.innerWidth;
@@ -203,26 +206,30 @@ export class GenericTooltipService {
     return legendIconInnerStyle;
   }
 
-  addLegendToDom
-  (innerHTMLtext: string,
+  addLegendToDom (
+    innerHTMLtext: string,
     legendIconStyle: string,
     legendIconInnerStyle: string,
     body: Array<string>,
     style: string,
-    tooltipEl: HTMLElement) {
-    let innerHtml = innerHTMLtext;
-    let legendImage = `<div class="legendIcon" style="${legendIconStyle}">`;
-    const legendSubImage = `<div style="${legendIconInnerStyle}"></div>`;
-    legendImage += `${legendSubImage}</div>`;
-
-    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);
+    tooltipEl: HTMLElement,
+    patternsColors: string[],
+    patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[],
+    disableAccessibility: boolean = false
+    ) {
+      let innerHtml = innerHTMLtext;
+      let legendImage = `<div class="legendIcon" style="${legendIconStyle}">`;
+      const legendSubImage = `<div style="${legendIconInnerStyle}"></div>`;
+      legendImage += `${legendSubImage}</div>`;
+
+      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);
+      }
     }
-  }
 
   setInnerHtmlToAdd (body: Array<string>, style: string, legendImage: string) {
     const legendText = body[0].split(':')[0];
@@ -245,7 +252,7 @@ export class GenericTooltipService {
     doughnutHtml += `<div style="${fontProperties}; margin-left:3rem;">${this.dataToDisplay}</div>`;
     doughnutHtml += '</div></div>';
     return doughnutHtml;
-  }  
+  }
 
   returnRadarHtml (style: string, legendImage: string, spanText: string) {
     const fontProperties = 'font-family: Arial; font-size: 16px';
@@ -256,10 +263,10 @@ export class GenericTooltipService {
     radarHtml += `<div style="margin-left: 20px;">${this.dataToDisplay}</div>`;
     radarHtml += '</div>';
     radarHtml += '</div><div>';
-  
+
     return radarHtml;
   }
-  
+
   returnDetailsBarchartHtml (style: string, legendImage: string, spanText: string) {
     const fontProperties = 'font-family: Arial; font-size: 16px';
     let barChartHtml = `<div style="${fontProperties}; display: flex; align-items: center;">${legendImage + spanText}</div>`;
@@ -268,23 +275,23 @@ export class GenericTooltipService {
     barChartHtml += `<div>${this.xValue}</div>`;
     barChartHtml += `<div style="margin-left: 20px;">${this.titleLines[0]}</div>`;
     barChartHtml += '</div>';
-  
+
     barChartHtml += `<div style="${fontProperties}; ${style}; border-: none; display:flex; justify-content: space-between;">`;
     barChartHtml += `<div>${(this.yValue)}</div>`;
     barChartHtml += `<div style="margin-left: 20px;">${this.dataToDisplay}</div>`;
     barChartHtml += '</div>';
-  
+
     return barChartHtml;
   }
-  
 
-  setInnerHtmlAndPattern(tableRoot: HTMLElement, innerHtml: string) {
+
+  setInnerHtmlAndPattern(tableRoot: HTMLElement, innerHtml: string, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean = false) {
     tableRoot.innerHTML = innerHtml;
     const legendIconHtml = document.querySelector('.legendIcon') as HTMLElement;
     const img: HTMLImageElement = new Image();
-  
+
     let index: number;
-  
+
     if (this.chartType === 'DOUGHNUT') {
       index = this.dataIndex + 1;
     } else {
@@ -292,7 +299,7 @@ export class GenericTooltipService {
     }
     const patternIndex = getPatternIndexWithShift(index, this.patternShifting);
     if (this.chartType !== 'LINE_CHART' && this.chartType !== 'RADAR') {
-      const pattern: CanvasPattern = patternsStandardList[patternIndex - 1](false);
+      const pattern: CanvasPattern = patternsList[patternIndex - 1](false, patternsColors[patternIndex - 1], disableAccessibility);
       const patternCanvas: HTMLCanvasElement = getPatternCanvas(pattern, 22, 22);
       img.src = patternCanvas.toDataURL();
       legendIconHtml.style.backgroundImage = `url(${img.src})`;

package/src/services/patterns/ChartDesign.ts

@@ -13,15 +13,21 @@ export default function() {
         PatternVerticalLines,
         PatternDashedDiagonals,
         PatternCircles
-      ] as ((hover: boolean) => CanvasPattern)[];
+      ] as ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[];
 
-      const patternsColors: string[] = ['#393879b3', '#006974b3', '#405d68b3', '#005c91b3', '#8c3500b3', '#8c0003b3'];
-      const patternsColorsLowerOpacity: string[] = ['#3938794d', '#0069744d', '#405d684d', '#005c914d', '#8c35004d', '#8c00034d'];
-
-      return {
-        patternsStandardList,
-        patternsColors,
-        patternsColorsLowerOpacity,
-      };
+    const colourSets: [string[], string[], string[], string[], string[], string[], string[]] = [
+      ['#393879', '#006974', '#405D68', '#005C91', '#8C3500', '#8C0003'],
+      ['#A274FF', '#143666', '#00A3B2', '#8C1551', '#F255A3', '#095359'],
+      ['#00A3B2', '#143666', '#3D993D', '#8C1551', '#E56D17', '#4C3380'],
+      ['#8C1551', '#E56D17', '#4C3380', '#4588E5', '#095359', '#F255A3'],
+      ['#4588E5', '#4C3380', '#E56D17', '#143666', '#D94141', '#8C1551'],
+      ['#143666', '#F255A3', '#095359', '#4588E5', '#8C1551', '#E56D17'],
+      ['#A274FF', '#B0BBC0', '#B0BBC0', '#B0BBC0', '#B0BBC0', '#B0BBC0']
+    ];
+   
+    return {
+      patternsStandardList,
+      colourSets
+    };
 
 }