@oliasoft-open-source/charts-library 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "scripts": {

package/release-notes.md

@@ -1,5 +1,13 @@
 # Charts Library Release Notes
 
+## 2.3.0
+
+- Text annotations in line chart
+
+## 2.2.1
+
+- Support for dark mode
+
 ## 2.2.0
 
 - first publish of release notes

package/src/components/bar-chart/bar-chart-prop-types.js

@@ -45,7 +45,6 @@ export const BarChartPropTypes = {
         maintainAspectRatio: PropTypes.bool,
         staticChartHeight: PropTypes.bool,
         performanceMode: PropTypes.bool,
-        darkMode: PropTypes.bool,
       }),
       tooltip: PropTypes.shape({
         tooltips: PropTypes.bool,
@@ -142,7 +141,6 @@ export const getDefaultProps = (props) => {
           props.chart.options.chartStyling.performanceMode != null
             ? props.chart.options.chartStyling.performanceMode
             : true,
-        darkMode: props.chart.options.chartStyling.darkMode || false,
       },
       tooltip: {
         tooltips:

package/src/components/bar-chart/bar-chart.jsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import {
   BarElement,
   CategoryScale,
   Chart as ChartJS,
-  defaults,
   Filler,
   Legend,
   LinearScale,
@@ -30,6 +29,7 @@ import {
   getClassName,
   getPlugins,
   getLegend,
+  setDefaultTheme,
 } from '../../helpers/chart-utils';
 import {
   ALPHA_CHANEL,
@@ -37,12 +37,6 @@ import {
   AUTO,
   COLORS,
   CUSTOM_LEGEND_PLUGIN_NAME,
-  DARK_MODE_COLORS,
-  DEFAULT_COLOR,
-  DEFAULT_DARK_MODE_BORDER_COLOR,
-  DEFAULT_DARK_MODE_COLOR,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
 } from '../../helpers/chart-consts';
 import {
   AxisType,
@@ -65,17 +59,12 @@ ChartJS.register(
   annotationPlugin,
 );
 
-defaults.font.size = DEFAULT_FONT_SIZE;
-defaults.color = DEFAULT_COLOR;
-defaults.font.family = DEFAULT_FONT_FAMILY;
-defaults.darkModeColor = DEFAULT_DARK_MODE_COLOR;
-defaults.darkModeBorderColor = DEFAULT_DARK_MODE_BORDER_COLOR;
-
 /**
  * this is a bar chart component
  * @param {import('./bar-chart.interface').IBarChartProps} props
  */
 const BarChart = (props) => {
+  setDefaultTheme();
   const chartRef = useRef(null);
   const [pointHover, setPointHover] = useState(false);
   const chart = getDefaultProps(props);
@@ -109,7 +98,7 @@ const BarChart = (props) => {
     }
 
     const generatedDatasets = barDatasetsCopy.map((barDataset, index) => {
-      const colorSchema = chartStyling.darkMode ? DARK_MODE_COLORS : COLORS;
+      const colorSchema = COLORS;
       const colors = barDataset.data.map((_, i) => {
         const colorSelectionIndex = datasets.length > 1 ? index : i;
         return colorSchema[colorSelectionIndex] || generateRandomColor(COLORS);

package/src/components/bar-chart/bar-chart.module.less

@@ -1,3 +1,8 @@
+html[data-theme='dark'] .chart canvas {
+  // Flip chart colors if dark mode enabled
+  filter: invert(1) hue-rotate(180deg);
+}
+
 .chart {
   border: 1px solid rgba(255, 255, 255, 0);
   padding-top: 10px;

package/src/components/bar-chart/bar-chart.stories.jsx

@@ -321,38 +321,6 @@ const controlAnnotationChart = {
   },
 };
 
-const darkMode = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a, dataset1_2a, dataset1_3a],
-  },
-  options: {
-    title: 'Dark mode',
-    axes: {
-      x: [
-        {
-          label: 'X',
-        },
-      ],
-    },
-    chartStyling: {
-      darkMode: true,
-    },
-    graph: {
-      showDataLabels: true,
-      showMinorGridlines: true,
-    },
-    annotations: {
-      annotationsData: [
-        {
-          label: 'Annotation 1',
-          value: 6,
-        },
-      ],
-    },
-  },
-};
-
 const legendRight = {
   data: {
     labels: labels1,
@@ -469,9 +437,6 @@ AnnotationsInLegend.args = { chart: controlAnnotationChart };
 export const Animated = Template.bind({});
 Animated.args = { chart: animatedChart };
 
-export const DarkMode = Template.bind({});
-DarkMode.args = { chart: darkMode };
-
 export const CustomLegend = TemplateWithCustomLegendContainer.bind({});
 CustomLegend.args = {
   chart: {

package/src/components/bar-chart/get-bar-chart-data-labels.js

@@ -1,5 +1,5 @@
 import { AlignOptions } from '../../helpers/enums';
-import { AUTO, DEFAULT_DARK_MODE_COLOR } from '../../helpers/chart-consts';
+import { AUTO } from '../../helpers/chart-consts';
 
 /**
  * @param {import('./bar-chart.interface').IBarChartOptions} options - bar chart options object
@@ -35,9 +35,6 @@ const getBarChartDataLabels = (options) => {
         align: beginAtZero ? AlignOptions.Center : beginAtNotZeroAlign,
         anchor: beginAtZero ? AlignOptions.Center : beginAtNotZeroAnchor,
         formatter: formatterCallback,
-        color: options.chartStyling.darkMode
-          ? DEFAULT_DARK_MODE_COLOR
-          : undefined,
       }
     : { display: false };
 };

package/src/components/bar-chart/get-bar-chart-scales.js

@@ -4,14 +4,7 @@ import {
   isVertical,
   generateRandomColor,
 } from '../../helpers/chart-utils';
-import {
-  COLORS,
-  DARK_MODE_COLORS,
-  DEFAULT_COLOR,
-  DEFAULT_DARK_MODE_BORDER_COLOR,
-  DEFAULT_DARK_MODE_COLOR,
-  LOGARITHMIC_STEPS,
-} from '../../helpers/chart-consts';
+import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
 
 /**
  * @param {import('./bar-chart.interface').IBarChartData} chart - chart data
@@ -57,11 +50,6 @@ const getBarChartAxis = (chart, axisType, currentScales) => {
       };
     } else {
       return {
-        color:
-          axisData.color ||
-          (chart.options.chartStyling.darkMode
-            ? DEFAULT_DARK_MODE_COLOR
-            : DEFAULT_COLOR),
         stepSize:
           axisData.stepSize || chart.options.additionalAxesOptions.stepSize,
       };
@@ -85,18 +73,9 @@ const getBarChartAxis = (chart, axisType, currentScales) => {
       display: axisData.label?.length || axisData.unit?.length,
       text: axisData.label || axisData.unit,
       padding: 0,
-      color: chart.options.chartStyling.darkMode
-        ? DEFAULT_DARK_MODE_COLOR
-        : undefined,
     },
     ticks: getTicks(),
     grid: {
-      color: chart.options.chartStyling.darkMode
-        ? DEFAULT_DARK_MODE_BORDER_COLOR
-        : undefined,
-      borderColor: chart.options.chartStyling.darkMode
-        ? DEFAULT_DARK_MODE_BORDER_COLOR
-        : undefined,
       ...grid,
     },
     stacked: chart.options.additionalAxesOptions.stacked,
@@ -111,10 +90,7 @@ const getBarChartAxes = (chart, axisType) => {
   const axesData = chart.options.axes[axisType];
   const axes = axesData.reduce((acc, curr, i) => {
     const axisData = curr;
-    const color =
-      curr.color ||
-      (chart.options.chartStyling.darkMode ? DARK_MODE_COLORS[i] : COLORS[i]) ||
-      generateRandomColor(COLORS);
+    const color = curr.color || COLORS[i] || generateRandomColor(COLORS);
     axisData.color = color;
     axisData.position = curr.position || getAxisPosition(axisType, i);
 

package/src/components/line-chart/get-line-chart-data-labels.js

@@ -1,4 +1,4 @@
-import { AUTO, DEFAULT_DARK_MODE_COLOR } from '../../helpers/chart-consts';
+import { AUTO } from '../../helpers/chart-consts';
 import { AlignOptions, PointType } from '../../helpers/enums';
 
 /**
@@ -14,9 +14,6 @@ const getLineChartDataLabels = (options) => {
             : AlignOptions.End,
         formatter: (value, context) =>
           context.dataset.data[context.dataIndex].label || '',
-        color: options.chartStyling.darkMode
-          ? DEFAULT_DARK_MODE_COLOR
-          : undefined,
       }
     : { display: false };
 };

package/src/components/line-chart/get-line-chart-scales.js

@@ -2,14 +2,7 @@ import {
   generateRandomColor,
   getAxisPosition,
 } from '../../helpers/chart-utils';
-import {
-  COLORS,
-  DARK_MODE_COLORS,
-  DEFAULT_COLOR,
-  DEFAULT_DARK_MODE_BORDER_COLOR,
-  DEFAULT_DARK_MODE_COLOR,
-  LOGARITHMIC_STEPS,
-} from '../../helpers/chart-consts';
+import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
 import { truncateDecimals } from './line-chart-utils';
 import { AxisType, ScaleType } from '../../helpers/enums';
 
@@ -50,9 +43,6 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
           },
         }
       : {
-          color:
-            axisData.color ||
-            (chartStyling.darkMode ? DEFAULT_DARK_MODE_COLOR : DEFAULT_COLOR),
           stepSize:
             axisData.stepSize ||
             (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
@@ -73,14 +63,9 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
       display: axisData.label?.length,
       text: axisData.label,
       padding: 0,
-      color: chartStyling.darkMode ? DEFAULT_DARK_MODE_BORDER_COLOR : undefined,
     },
     ticks: getTicks(),
     grid: {
-      color: chartStyling.darkMode ? DEFAULT_DARK_MODE_BORDER_COLOR : undefined,
-      borderColor: chartStyling.darkMode
-        ? DEFAULT_DARK_MODE_BORDER_COLOR
-        : undefined,
       ...axisData.gridLines,
     },
   };
@@ -95,10 +80,7 @@ const getLineChartAxes = (options, axisType, state) => {
   const axesData = options.axes[axisType];
   const axes = axesData.reduce((acc, curr, i) => {
     const axisData = curr;
-    axisData.color =
-      curr.color ||
-      (options.chartStyling.darkMode ? DARK_MODE_COLORS[i] : COLORS[i]) ||
-      generateRandomColor(COLORS);
+    axisData.color = curr.color || COLORS[i] || generateRandomColor(COLORS);
     axisData.position = curr.position || getAxisPosition(axisType, i);
 
     const axis = getLineChartAxis(options, axisType, state, axisData, i);

package/src/components/line-chart/line-chart-prop-types.js

@@ -50,7 +50,6 @@ export const LineChartPropTypes = {
         maintainAspectRatio: PropTypes.bool,
         staticChartHeight: PropTypes.bool,
         performanceMode: PropTypes.bool,
-        darkMode: PropTypes.bool,
         squareAspectRatio: PropTypes.bool,
       }),
       tooltip: PropTypes.shape({
@@ -65,6 +64,7 @@ export const LineChartPropTypes = {
         showMinorGridlines: PropTypes.bool,
       }),
       annotations: PropTypes.shape({
+        labelAnnotation: PropTypes.object,
         showAnnotations: PropTypes.bool,
         controlAnnotation: PropTypes.bool,
         annotationsData: PropTypes.arrayOf(
@@ -149,7 +149,6 @@ export const getDefaultProps = (props) => {
           props.chart.options.chartStyling.staticChartHeight || false,
         performanceMode:
           props.chart.options.chartStyling.performanceMode ?? true,
-        darkMode: props.chart.options.chartStyling.darkMode || false,
         squareAspectRatio:
           props.chart.options.chartStyling.squareAspectRatio || false,
       },
@@ -168,6 +167,7 @@ export const getDefaultProps = (props) => {
           props.chart.options.graph.showMinorGridlines || false,
       },
       annotations: {
+        labelAnnotation: props.chart.options.annotations.labelAnnotation || {},
         showAnnotations:
           props.chart.options.annotations.showAnnotations ?? false,
         controlAnnotation:

package/src/components/line-chart/line-chart.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useReducer, useRef } from 'react';
 import {
   CategoryScale,
   Chart as ChartJS,
-  defaults,
   Filler,
   Legend,
   LinearScale,
@@ -55,18 +54,13 @@ import {
   getLegend,
   getPlugins,
   getTitle,
+  setDefaultTheme,
 } from '../../helpers/chart-utils';
 import {
   ANIMATION_DURATION,
   AUTO,
   COLORS,
   CUSTOM_LEGEND_PLUGIN_NAME,
-  DARK_MODE_COLORS,
-  DEFAULT_COLOR,
-  DEFAULT_DARK_MODE_BORDER_COLOR,
-  DEFAULT_DARK_MODE_COLOR,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
 } from '../../helpers/chart-consts';
 import {
   AxisType,
@@ -91,17 +85,12 @@ ChartJS.register(
   annotationPlugin,
 );
 
-defaults.font.size = DEFAULT_FONT_SIZE;
-defaults.color = DEFAULT_COLOR;
-defaults.font.family = DEFAULT_FONT_FAMILY;
-defaults.darkModeColor = DEFAULT_DARK_MODE_COLOR;
-defaults.darkModeBorderColor = DEFAULT_DARK_MODE_BORDER_COLOR;
-
 /**
  * this is a line chart component
  * @param {import('./line-chart.interface').ILineChartProps} props
  */
 const LineChart = (props) => {
+  setDefaultTheme();
   const chartRef = useRef(null);
   let pointHover = false;
   const chart = getDefaultProps(props);
@@ -177,9 +166,7 @@ const LineChart = (props) => {
       annotations.annotationsData?.length
     ) {
       annotations.annotationsData.forEach((annotation, index) => {
-        const color =
-          annotation.color ||
-          (chartStyling.darkMode ? DARK_MODE_COLORS[index] : COLORS[index]);
+        const color = annotation.color || COLORS[index];
         copyDataset.push({
           isAnnotation: true,
           label: annotation.label,
@@ -221,9 +208,7 @@ const LineChart = (props) => {
       const pointHoverRadius = line.pointHoverRadius
         ? parseFloat(line.pointHoverRadius)
         : DEFAULT_HOVER_RADIUS;
-      const indexedColor = chartStyling.darkMode
-        ? DARK_MODE_COLORS[i]
-        : COLORS[i];
+      const indexedColor = COLORS[i];
 
       return {
         ...line,
@@ -310,7 +295,7 @@ const LineChart = (props) => {
     const { ctx } = chart;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-over';
-    ctx.fillStyle = chartStyling.darkMode ? 'black' : 'white';
+    ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, chart.width, chart.height);
     ctx.restore();
 

package/src/components/line-chart/line-chart.module.less

@@ -1,3 +1,8 @@
+html[data-theme='dark'] .chart canvas {
+  // Flip chart colors if dark mode enabled
+  filter: invert(1) hue-rotate(180deg);
+}
+
 .chart {
   border: 1px solid rgba(255, 255, 255, 0);
   padding-top: 10px;

package/src/components/line-chart/line-chart.stories.jsx

@@ -317,6 +317,9 @@ Annotations.args = {
       ...basicChart.options,
       annotations: {
         showAnnotations: true,
+        labelAnnotation: {
+          content: ['Annotation label'],
+        },
         annotationsData: [
           {
             annotationAxis: 'y',
@@ -419,17 +422,3 @@ SquareAspectRatio.args = {
     },
   },
 };
-
-export const DarkMode = Template.bind({});
-DarkMode.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      chartStyling: {
-        ...basicChart.options.chartStyling,
-        darkMode: true,
-      },
-    },
-  },
-};

package/src/components/pie-chart/pie-chart-prop-types.js

@@ -18,7 +18,6 @@ export const PieChartPropTypes = {
         maintainAspectRatio: PropTypes.bool,
         staticChartHeight: PropTypes.bool,
         performanceMode: PropTypes.bool,
-        darkMode: PropTypes.bool,
       }),
       tooltip: PropTypes.shape({
         tooltips: PropTypes.bool,
@@ -74,7 +73,6 @@ export const getDefaultProps = (props) => {
           props.chart.options.chartStyling.performanceMode != null
             ? props.chart.options.chartStyling.performanceMode
             : true,
-        darkMode: props.chart.options.chartStyling.darkMode || false,
       },
       tooltip: {
         tooltips:

package/src/components/pie-chart/pie-chart-utils.js

@@ -21,29 +21,6 @@ export const colors = [
   '#3b3eac',
 ];
 
-export const colorsDarkmode = [
-  '#578fff',
-  '#ff5026',
-  '#ff9900',
-  '#24ff31',
-  '#ff00ff',
-  '#00c5ff',
-  '#f7407d',
-  '#99ff00',
-  '#ff4040',
-  '#51a7fc',
-  '#f26bf2',
-  '#36f8ff',
-  '#ffff19',
-  '#9c6bff',
-  '#ff8b17',
-  '#ff1212',
-  '#fa29ff',
-  '#54ffaa',
-  '#80b0ff',
-  '#595eff',
-];
-
 export const generateRandomColor = () => {
   const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
   if (colors.includes(color)) {

package/src/components/pie-chart/pie-chart.interface.ts

@@ -33,7 +33,6 @@ export interface IChartStyling {
     maintainAspectRatio: boolean;
     staticChartHeight: boolean;
     performanceMode: boolean;
-    darkMode: boolean;
 }
 
 export interface IOptions {

package/src/components/pie-chart/pie-chart.jsx

@@ -4,7 +4,6 @@ import {
   ArcElement,
   CategoryScale,
   Chart as ChartJS,
-  defaults,
   Filler,
   Legend,
   LinearScale,
@@ -17,13 +16,9 @@ import dataLabelsPlugin from 'chartjs-plugin-datalabels';
 import { Pie } from 'react-chartjs-2';
 
 import styles from './pie-chart.module.less';
-import { colors, colorsDarkmode, generateRandomColor } from './pie-chart-utils';
+import { colors, generateRandomColor } from './pie-chart-utils';
 import { getDefaultProps, PieChartPropTypes } from './pie-chart-prop-types';
-import {
-  DEFAULT_COLOR,
-  DEFAULT_DARK_MODE_BORDER_COLOR,
-  DEFAULT_DARK_MODE_COLOR,
-} from '../../helpers/chart-consts';
+import { setDefaultTheme } from '../../helpers/chart-utils';
 
 ChartJS.register(
   LinearScale,
@@ -38,12 +33,6 @@ ChartJS.register(
   dataLabelsPlugin,
 );
 
-defaults.font.size = 13;
-defaults.color = DEFAULT_COLOR;
-defaults.font.family = '"Lato", sans-serif';
-defaults.darkModeColor = DEFAULT_DARK_MODE_COLOR;
-defaults.darkModeBorderColor = DEFAULT_DARK_MODE_BORDER_COLOR;
-
 /**
  * this is a pie chart component
  * @param {} props
@@ -51,6 +40,7 @@ defaults.darkModeBorderColor = DEFAULT_DARK_MODE_BORDER_COLOR;
  * ./pie-chart.interface
  */
 const PieChart = (props) => {
+  setDefaultTheme();
   const chart = getDefaultProps(props);
   const chartRef = useRef(null);
   const [pointHover, setPointHover] = useState(false);
@@ -90,15 +80,9 @@ const PieChart = (props) => {
 
     const generatedDatasets = copyDataset.map((pieDataset, index) => {
       const borderWidth = parseFloat(pieDataset.borderWidth) || '1';
-      const colorLightmode = pieDataset.data.map(
+      const color = pieDataset.data.map(
         (pie, i) => colors[i] || generateRandomColor(),
       );
-      const colorDarkmode = pieDataset.data.map(
-        (pie, i) => colorsDarkmode[i] || generateRandomColor(),
-      );
-      const color = options.chartStyling.darkMode
-        ? colorDarkmode
-        : colorLightmode;
       const borderColor = pieDataset.borderColor || color;
       const backgroundColor =
         pieDataset.backgroundColor ||
@@ -120,10 +104,7 @@ const PieChart = (props) => {
     return options.title !== ''
       ? {
           display: true,
-          text: options.title,
-          color: options.chartStyling.darkMode
-            ? defaults.darkModeColor
-            : undefined,
+          text: chart.options.title,
         }
       : {};
   };
@@ -244,9 +225,6 @@ const PieChart = (props) => {
                 : label;
             return dataLabel;
           },
-          color: options.chartStyling.darkMode
-            ? defaults.darkModeColor
-            : undefined,
         }
       : {
           display: false,
@@ -355,9 +333,6 @@ const PieChart = (props) => {
         boxHeight: 6,
         boxWidth: 6,
         usePointStyle: true,
-        color: options.chartStyling.darkMode
-          ? defaults.darkModeColor
-          : undefined,
         filter: (item, data) => {
           if (!options.legend.useDataset) return true;
           return !data.datasets[item.index]?.hideLegend;

package/src/components/pie-chart/pie-chart.module.less

@@ -1,3 +1,8 @@
+html[data-theme='dark'] .chart canvas {
+  // Flip chart colors if dark mode enabled
+  filter: invert(1) hue-rotate(180deg);
+}
+
 .chart {
   border: 1px solid rgba(255, 255, 255, 0);
   padding-top: 10px;

package/src/components/pie-chart/pie-chart.stories.jsx

@@ -102,38 +102,6 @@ const dataLabelssTooltips = {
   },
 };
 
-const darkMode = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1, dataset2, dataset3],
-  },
-  options: {
-    title: 'Dark mode',
-    axes: {
-      x: [
-        {
-          label: 'X',
-        },
-      ],
-    },
-    chartStyling: {
-      darkMode: true,
-    },
-    graph: {
-      showDataLabels: true,
-      showMinorGridlines: true,
-    },
-    annotations: {
-      annotationsData: [
-        {
-          label: 'Annotation 1',
-          value: 6,
-        },
-      ],
-    },
-  },
-};
-
 const hoverOffsetChart = {
   data: {
     labels: labels1,
@@ -229,6 +197,3 @@ HoverOffset.args = { chart: hoverOffsetChart };
 
 export const SegmentOffset = Template.bind({});
 HoverOffset.args = { chart: offsetChart };
-
-export const DarkMode = Template.bind({});
-DarkMode.args = { chart: darkMode };

package/src/components/scatter-chart/scatter-chart.jsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import { Scatter } from 'react-chartjs-2';
 
+import { setDefaultTheme } from '../../helpers/chart-utils';
+import styles from './scatter-chart.module.less';
+
 /**
  *
  * @param {import('./scatter-chart.intefrace').IScatterChartProps} props
  */
 const ScatterChart = (props) => {
+  setDefaultTheme();
   const { data, options, testId = null } = props.chart;
-  return <Scatter options={options} data={data} data-testid={testId} />;
+  return (
+    <div className={styles.chart}>
+      <Scatter options={options} data={data} data-testid={testId} />
+    </div>
+  );
 };
 
 export default ScatterChart;

package/src/components/scatter-chart/scatter-chart.module.less

@@ -0,0 +1,4 @@
+html[data-theme='dark'] .chart canvas {
+  // Flip chart colors if dark mode enabled
+  filter: invert(1) hue-rotate(180deg);
+}

package/src/helpers/chart-consts.js

@@ -4,10 +4,9 @@ export const BORDER_WIDTH = {
 };
 
 export const ANNOTATION_DASH = [10, 2];
+export const DEFAULT_BORDER_COLOR = 'rgba(0,0,0,0.1)';
 export const DEFAULT_FONT_SIZE = 13;
 export const DEFAULT_FONT_FAMILY = '"Lato", sans-serif';
-export const DEFAULT_DARK_MODE_COLOR = 'rgba(255,255,255,.87)';
-export const DEFAULT_DARK_MODE_BORDER_COLOR = 'rgba(255,255,255,0.1)';
 export const DEFAULT_COLOR = 'rgba(0,0,0,.87)';
 export const LEGEND_LABEL_BOX_SIZE = 6;
 
@@ -36,29 +35,6 @@ export const COLORS = [
   '#3b3eac',
 ];
 
-export const DARK_MODE_COLORS = [
-  '#578fff',
-  '#ff5026',
-  '#ff9900',
-  '#24ff31',
-  '#ff00ff',
-  '#00c5ff',
-  '#f7407d',
-  '#99ff00',
-  '#ff4040',
-  '#51a7fc',
-  '#f26bf2',
-  '#36f8ff',
-  '#ffff19',
-  '#9c6bff',
-  '#ff8b17',
-  '#ff1212',
-  '#fa29ff',
-  '#54ffaa',
-  '#80b0ff',
-  '#595eff',
-];
-
 /**
  * @type {string}
  * @desc equivalent of 0.6 rgba alpha chanel

package/src/helpers/chart-interface.ts

@@ -8,10 +8,18 @@ export interface IChartAnnotationsData {
     endValue: number
 };
 
+export interface ILabelAnnotation {
+    content: string[];
+    fontSize: number;
+    xAdjust: number;
+    yAdjust: number;
+}
+
 export interface IChartAnnotations {
     showAnnotations: boolean;
     controlAnnotation: boolean;
     annotationsData: IChartAnnotationsData[];
+    labelAnnotation: ILabelAnnotation
 }
 
 export interface IChartStyling {
@@ -21,7 +29,6 @@ export interface IChartStyling {
     squareAspectRatio?: boolean;
     staticChartHeight: boolean;
     performanceMode: boolean;
-    darkMode: boolean;
 }
 
 export interface ICustomLegend {

package/src/helpers/chart-utils.js

@@ -1,9 +1,13 @@
+import { defaults } from 'chart.js';
 import cx from 'classnames';
 import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
 import {
   CUSTOM_LEGEND_PLUGIN_NAME,
+  DEFAULT_BORDER_COLOR,
   DEFAULT_CHART_NAME,
-  DEFAULT_DARK_MODE_COLOR,
+  DEFAULT_COLOR,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
   LEGEND_LABEL_BOX_SIZE,
   WHITE_COLOR_AS_DECIMAL,
 } from './chart-consts';
@@ -92,9 +96,6 @@ export const getTitle = (options) => {
     ? {
         display: true,
         text: options.title,
-        color: options.chartStyling.darkMode
-          ? DEFAULT_DARK_MODE_COLOR
-          : undefined,
       }
     : {};
 };
@@ -164,7 +165,6 @@ export const getLegend = (options, clickHandler, state = null) => {
       boxHeight: LEGEND_LABEL_BOX_SIZE,
       boxWidth: LEGEND_LABEL_BOX_SIZE,
       usePointStyle: true,
-      color: chartStyling.darkMode ? DEFAULT_DARK_MODE_COLOR : undefined,
       filter: (item, data) => !data.datasets[item.datasetIndex].hideLegend,
     },
     onClick: clickHandler,
@@ -196,3 +196,10 @@ export const getChartFileName = (axes) => {
   }, []);
   return axesLabels.join('_');
 };
+
+export const setDefaultTheme = () => {
+  defaults.font.size = DEFAULT_FONT_SIZE;
+  defaults.font.family = DEFAULT_FONT_FAMILY;
+  defaults.color = DEFAULT_COLOR;
+  defaults.borderColor = DEFAULT_BORDER_COLOR;
+};

package/src/helpers/get-chart-annotation.js

@@ -1,10 +1,5 @@
 import { AxisType, ChartType, CursorStyle, Position } from './enums';
-import {
-  ANNOTATION_DASH,
-  BORDER_WIDTH,
-  COLORS,
-  DARK_MODE_COLORS,
-} from './chart-consts';
+import { ANNOTATION_DASH, BORDER_WIDTH, COLORS } from './chart-consts';
 
 const annotationEnter = ({ element }, { chart }) => {
   if (element.options.scaleID?.includes(AxisType.X)) {
@@ -30,7 +25,6 @@ const annotationLeave = ({ element }, { chart }) => {
  */
 const generateAnnotations = (options, state) => {
   const { annotationsData } = options.annotations;
-  const isDarkModeOn = options.chartStyling.darkMode;
 
   const annotations = annotationsData?.reduce((acc, curr, i) => {
     if (!state?.showAnnotationLineIndex?.includes(i)) {
@@ -42,8 +36,7 @@ const generateAnnotations = (options, state) => {
       return options.axes[axisType]?.length > 1 ? `${axisType}1` : axisType;
     };
 
-    const color =
-      curr?.color || (isDarkModeOn ? DARK_MODE_COLORS[i] : COLORS[i]);
+    const color = curr?.color || COLORS[i];
 
     const annotation = {
       ...curr,
@@ -71,6 +64,36 @@ const generateAnnotations = (options, state) => {
   return annotations;
 };
 
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @return {{label1: {}}}
+ */
+const getLabelAnnotation = (options) => {
+  const { annotations } = options;
+  const isDarkModeOn = options.chartStyling.darkMode || false;
+  const {
+    content = [],
+    xAdjust = -200,
+    yAdjust = 120,
+    fontSize = 12,
+  } = annotations.labelAnnotation;
+
+  return {
+    label1: {
+      type: 'label',
+      xAdjust,
+      yAdjust,
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+      color: isDarkModeOn && 'rgba(255, 255, 255, 1)',
+      content,
+      font: {
+        size: fontSize,
+      },
+    },
+  };
+};
+
 /**
  * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
  * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
@@ -81,11 +104,16 @@ const getAnnotation = (options, state) => {
   const { annotations } = options;
   const isAnnotationShown = annotations?.showAnnotations;
   const isAnnotationDataProvided = annotations?.annotationsData?.length;
+
+  const formAnnotation = {
+    ...getLabelAnnotation(options),
+    ...(isAnnotationShown && isAnnotationDataProvided
+      ? generateAnnotations(options, state)
+      : []),
+  };
+
   return {
-    annotations:
-      isAnnotationShown && isAnnotationDataProvided
-        ? generateAnnotations(options, state)
-        : [],
+    annotations: formAnnotation,
   };
 };
 export default getAnnotation;

package/src/helpers/get-custom-legend-plugin-example.js

@@ -65,7 +65,6 @@ export const getCustomLegendPlugin = (customLegendContainerID) => ({
 
       // Text
       const textContainer = document.createElement('p');
-      textContainer.style.color = item.fontColor;
       textContainer.style.margin = 0;
       textContainer.style.padding = 0;
       textContainer.style.textDecoration = item.hidden ? 'line-through' : '';