From 20f00544fbd5a6ebb9868a2a56ecab3ef9bbbdc0 Mon Sep 17 00:00:00 2001
From: kurkle <jukka.kurkela@gmail.com>
Date: Fri, 24 Sep 2021 23:14:38 +0300
Subject: [PATCH 1/2] Types: Add scope to ticks.callback

---
 types/index.esm.d.ts          | 2 +-
 types/tests/scales/options.ts | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 19a7009fb97..ac26b57ffd4 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -2805,7 +2805,7 @@ export interface TickOptions {
   /**
    * Returns the string representation of the tick value as it should be displayed on the chart. See callback.
    */
-  callback: (tickValue: number | string, index: number, ticks: Tick[]) => string | number | null | undefined;
+  callback: (this: Scale, tickValue: number | string, index: number, ticks: Tick[]) => string | number | null | undefined;
   /**
    * If true, show tick labels.
    * @default true
diff --git a/types/tests/scales/options.ts b/types/tests/scales/options.ts
index 968d89031cf..cc1dc9015d9 100644
--- a/types/tests/scales/options.ts
+++ b/types/tests/scales/options.ts
@@ -26,6 +26,14 @@ const chart = new Chart('test', {
           // @ts-expect-error Type 'string' is not assignable to type 'false | "millisecond" | "second" | "minute" | "hour" | "day" | "week" | "month" | "quarter" | "year" | undefined'.
           unit: 'year'
         }
+      },
+      y: {
+        ticks: {
+          callback(tickValue) {
+            const value = this.getLabelForValue(tickValue as number);
+            return '$' + value;
+          }
+        }
       }
     }
   }

From fd432c2f793de7270f6836b782e37025f656827a Mon Sep 17 00:00:00 2001
From: kurkle <jukka.kurkela@gmail.com>
Date: Fri, 24 Sep 2021 23:47:10 +0300
Subject: [PATCH 2/2] Fix some typings issues

---
 docs/samples/advanced/linear-gradient.md     |  4 ++--
 docs/samples/advanced/radial-gradient.md     |  2 +-
 types/index.esm.d.ts                         | 10 +++++-----
 types/tests/scriptable_core_chart_options.ts | 15 +++++++++++++++
 4 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 types/tests/scriptable_core_chart_options.ts

diff --git a/docs/samples/advanced/linear-gradient.md b/docs/samples/advanced/linear-gradient.md
index 47fa7b50bb9..4b0896353c8 100644
--- a/docs/samples/advanced/linear-gradient.md
+++ b/docs/samples/advanced/linear-gradient.md
@@ -47,7 +47,7 @@ let width, height, gradient;
 function getGradient(ctx, chartArea) {
   const chartWidth = chartArea.right - chartArea.left;
   const chartHeight = chartArea.bottom - chartArea.top;
-  if (gradient === null || width !== chartWidth || height !== chartHeight) {
+  if (!gradient || width !== chartWidth || height !== chartHeight) {
     // Create the gradient because this is either the first render
     // or the size of the chart has changed
     width = chartWidth;
@@ -79,7 +79,7 @@ const data = {
 
         if (!chartArea) {
           // This case happens on initial chart load
-          return null;
+          return;
         }
         return getGradient(ctx, chartArea);
       },
diff --git a/docs/samples/advanced/radial-gradient.md b/docs/samples/advanced/radial-gradient.md
index cf8d0d63d42..c38833efc08 100644
--- a/docs/samples/advanced/radial-gradient.md
+++ b/docs/samples/advanced/radial-gradient.md
@@ -30,7 +30,7 @@ function createRadialGradient3(context, c1, c2, c3) {
   const chartArea = context.chart.chartArea;
   if (!chartArea) {
     // This case happens on initial chart load
-    return null;
+    return;
   }
 
   const chartWidth = chartArea.right - chartArea.left;
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index ac26b57ffd4..548720c57ca 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -34,7 +34,7 @@ export interface ScriptableLineSegmentContext {
   datasetIndex: number
 }
 
-export type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnyObject) => T);
+export type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnyObject) => T | undefined);
 export type ScriptableOptions<T, TContext> = { [P in keyof T]: Scriptable<T[P], TContext> };
 export type ScriptableAndArray<T, TContext> = readonly T[] | Scriptable<T, TContext>;
 export type ScriptableAndArrayOptions<T, TContext> = { [P in keyof T]: ScriptableAndArray<T[P], TContext> };
@@ -1402,22 +1402,22 @@ export interface CoreChartOptions<TType extends ChartType> extends ParsingOption
    * base color
    * @see Defaults.color
    */
-  color: Color;
+  color: Scriptable<Color, ScriptableContext<TType>>;
   /**
    * base background color
    * @see Defaults.backgroundColor
    */
-  backgroundColor: Color;
+  backgroundColor: Scriptable<Color, ScriptableContext<TType>>;
   /**
    * base border color
    * @see Defaults.borderColor
    */
-  borderColor: Color;
+  borderColor: Scriptable<Color, ScriptableContext<TType>>;
   /**
    * base font
    * @see Defaults.font
    */
-  font: FontSpec;
+  font: Scriptable<Partial<FontSpec>, ScriptableContext<TType>>;
   /**
    * Resizes the chart canvas when its container does (important note...).
    * @default true
diff --git a/types/tests/scriptable_core_chart_options.ts b/types/tests/scriptable_core_chart_options.ts
new file mode 100644
index 00000000000..8039f3c0dbb
--- /dev/null
+++ b/types/tests/scriptable_core_chart_options.ts
@@ -0,0 +1,15 @@
+import { ChartConfiguration } from '../index.esm';
+
+const getConfig = (): ChartConfiguration<'bar'> => {
+  return {
+    type: 'bar',
+    data: {
+      datasets: []
+    },
+    options: {
+      backgroundColor: (context) => context.active ? '#fff' : undefined,
+      font: (context) => context.datasetIndex === 1 ? { size: 10 } : { size: 12, family: 'arial' }
+    }
+  };
+};
+