[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/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/src/SparkLineChart/SparkLineChart.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsColor, ChartsColorPalette } from '../colorPalettes';
 import { BarPlot } from '../BarChart';
 import { LinePlot, AreaPlot, LineHighlightPlot } from '../LineChart';
 import { ChartContainer, ChartContainerProps } from '../ChartContainer';
@@ -106,6 +107,19 @@ export interface SparkLineChartProps
    * @default {}
    */
   slotProps?: SparkLineChartSlotProps;
+
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   * @deprecated use the `color` prop instead
+   */
+  colors?: ChartContainerProps['colors'];
+
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color?: ChartsColor;
 }
 
 const SPARKLINE_DEFAULT_MARGIN = {
@@ -134,7 +148,8 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(
     width,
     height,
     margin = SPARKLINE_DEFAULT_MARGIN,
-    colors,
+    color,
+    colors: deprecatedColors,
     sx,
     showTooltip,
     showHighlight,
@@ -160,6 +175,14 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(
 
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
 
+  const colors: ChartsColorPalette | undefined = React.useMemo(() => {
+    if (color == null) {
+      return undefined;
+    }
+
+    return typeof color === 'function' ? (mode: 'light' | 'dark') => [color(mode)] : [color];
+  }, [color]);
+
   return (
     <ChartContainer
       {...other}
@@ -191,7 +214,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(
           ...yAxis,
         },
       ]}
-      colors={colors}
+      colors={colors ?? deprecatedColors}
       sx={sx}
       disableAxisListener={
         (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') &&
@@ -237,9 +260,15 @@ SparkLineChart.propTypes = {
   }),
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
+   * @deprecated use the `color` prop instead
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

packages/x-charts/src/colorPalettes/colorPalettes.ts

@@ -1,5 +1,7 @@
 export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
 export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+export type ChartsColorCallback = (mode: 'light' | 'dark') => string;
+export type ChartsColor = string | ChartsColorCallback;
 
 export const rainbowSurgePaletteLight = [
   '#4254FB',

scripts/x-charts-pro.exports.json

@@ -76,6 +76,8 @@
   { "name": "ChartsAxisTooltipContentProps", "kind": "Interface" },
   { "name": "ChartsClipPath", "kind": "Function" },
   { "name": "ChartsClipPathProps", "kind": "TypeAlias" },
+  { "name": "ChartsColor", "kind": "TypeAlias" },
+  { "name": "ChartsColorCallback", "kind": "TypeAlias" },
   { "name": "ChartsColorPalette", "kind": "TypeAlias" },
   { "name": "ChartsColorPaletteCallback", "kind": "TypeAlias" },
   { "name": "ChartsGrid", "kind": "Function" },

scripts/x-charts.exports.json

@@ -72,6 +72,8 @@
   { "name": "ChartsAxisTooltipContentProps", "kind": "Interface" },
   { "name": "ChartsClipPath", "kind": "Function" },
   { "name": "ChartsClipPathProps", "kind": "TypeAlias" },
+  { "name": "ChartsColor", "kind": "TypeAlias" },
+  { "name": "ChartsColorCallback", "kind": "TypeAlias" },
   { "name": "ChartsColorPalette", "kind": "TypeAlias" },
   { "name": "ChartsColorPaletteCallback", "kind": "TypeAlias" },
   { "name": "ChartsGrid", "kind": "Function" },