[charts] Add color prop to Sparkline and deprecate colors

docs/data/charts/sparkline/ColorCustomization.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  height: 100,
+  yAxis: { min: 0, max: 100 },
+};
+
+const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
+
+export default function ColorCustomization() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <SparkLineChart data={values} color="green" {...settings} />
+    </Stack>
+  );
+}

docs/data/charts/sparkline/ColorCustomization.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  height: 100,
+  yAxis: { min: 0, max: 100 },
+} as const;
+
+const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
+
+export default function ColorCustomization() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <SparkLineChart data={values} color="green" {...settings} />
+    </Stack>
+  );
+}

docs/data/charts/sparkline/ColorCustomization.tsx.preview

@@ -0,0 +1 @@
+<SparkLineChart data={values} color="green" {...settings} />

docs/data/charts/sparkline/ColorCustomizationMode.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  height: 100,
+  yAxis: { min: 0, max: 100 },
+};
+
+const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
+
+export default function ColorCustomizationMode() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <SparkLineChart
+        data={values}
+        color={(mode) => (mode === 'light' ? 'black' : 'white')}
+        {...settings}
+      />
+    </Stack>
+  );
+}

docs/data/charts/sparkline/ColorCustomizationMode.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  height: 100,
+  yAxis: { min: 0, max: 100 },
+} as const;
+
+const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
+
+export default function ColorCustomizationMode() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <SparkLineChart
+        data={values}
+        color={(mode) => (mode === 'light' ? 'black' : 'white')}
+        {...settings}
+      />
+    </Stack>
+  );
+}

docs/data/charts/sparkline/ColorCustomizationMode.tsx.preview

@@ -0,0 +1,5 @@
+<SparkLineChart
+  data={values}
+  color={(mode) => (mode === 'light' ? 'black' : 'white')}
+  {...settings}
+/>

docs/data/charts/sparkline/sparkline.md

@@ -66,3 +66,15 @@ The demo below shows different ways to set the y-axis range.
 They always display the same data, going from -15 to 92, but with different `domainLimit` settings.
 
 {{"demo": "CustomDomainYAxis.js"}}
+
+## Color Customization
+
+You can customize the color of the sparkline by providing a color to the `color` prop.
+
+{{"demo": "ColorCustomization.js"}}
+
+The `color` prop also accepts a function that is called with the mode (`'light'` or `'dark'`), so you can adapt the color to user preferences.
+
+The following example shows a white line if this page is in dark mode, or a black one if it is in light mode.
+
+{{"demo": "ColorCustomizationMode.js"}}

docs/pages/x/api/charts/bar-chart-pro.json

@@ -22,7 +22,7 @@
     },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/bar-chart.json

@@ -22,7 +22,7 @@
     },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/chart-container.json

@@ -2,7 +2,7 @@
   "props": {
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/chart-data-provider-pro.json

@@ -2,7 +2,7 @@
   "props": {
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/chart-data-provider.json

@@ -1,6 +1,6 @@
 {
   "props": {
-    "colors": { "type": { "name": "any" }, "default": "rainbowSurgePalette" },
+    "colors": { "type": { "name": "any" }, "default": "blueberryTwilightPalette" },
     "dataset": { "type": { "name": "any" } },
     "height": { "type": { "name": "any" } },
     "id": { "type": { "name": "any" } },

docs/pages/x/api/charts/heatmap.json

@@ -24,7 +24,7 @@
     },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/line-chart-pro.json

@@ -21,7 +21,7 @@
     },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/line-chart.json

@@ -21,7 +21,7 @@
     },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/pie-chart.json

@@ -6,7 +6,7 @@
     },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "height": { "type": { "name": "number" } },

docs/pages/x/api/charts/scatter-chart-pro.json

@@ -21,7 +21,7 @@
     },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/scatter-chart.json

@@ -21,7 +21,7 @@
     },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "blueberryTwilightPalette"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/charts/spark-line-chart.json

@@ -5,9 +5,15 @@
       "required": true
     },
     "area": { "type": { "name": "bool" }, "default": "false" },
+    "color": {
+      "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" },
+      "default": "rainbowSurgePalette[0]"
+    },
     "colors": {
       "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
-      "default": "rainbowSurgePalette"
+      "default": "rainbowSurgePalette",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>color</code> prop instead"
     },
     "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json

@@ -4,6 +4,7 @@
     "area": {
       "description": "Set to <code>true</code> to fill spark line area. Has no effect if plotType=&#39;bar&#39;."
     },
+    "color": { "description": "Color used to colorize the sparkline." },
     "colors": { "description": "Color palette used to colorize multiple series." },
     "data": { "description": "Data to plot." },
     "dataset": {

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -168,7 +168,7 @@ BarChartPro.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx

@@ -82,7 +82,7 @@ ChartDataProviderPro.propTypes = {
   children: PropTypes.node,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts-pro/src/Heatmap/Heatmap.tsx

@@ -220,7 +220,7 @@ Heatmap.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -224,7 +224,7 @@ LineChartPro.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -106,7 +106,7 @@ ScatterChartPro.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts/src/BarChart/BarChart.tsx

@@ -179,7 +179,7 @@ BarChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts/src/ChartContainer/ChartContainer.tsx

@@ -69,7 +69,7 @@ ChartContainer.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx

@@ -68,7 +68,7 @@ ChartDataProvider.propTypes = {
   children: PropTypes.node,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.any,
   /**

packages/x-charts/src/LineChart/LineChart.tsx

@@ -200,7 +200,7 @@ LineChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts/src/PieChart/PieChart.tsx

@@ -170,7 +170,7 @@ PieChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts/src/ScatterChart/ScatterChart.tsx

@@ -177,7 +177,7 @@ ScatterChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**