Add docs

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 will be called with the mode (light or dark), so you can adapt the color to user preferences.
+
+The following example will show a white line if this page is in dark mode, or a black one if it is in light mode.
+
+{{"demo": "ColorCustomizationMode.js"}}