@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.4

package/ScatterChart/index.d.mts

@@ -5,5 +5,5 @@ export * from "./ScatterMarker.types.mjs";
 export * from "./ScatterMarker.mjs";
 export * from "./FocusedScatterMark.mjs";
 export * from "./ScatterChart.plugins.mjs";
-export type { ScatterClasses } from "./scatterClasses.mjs";
-export { scatterClasses } from "./scatterClasses.mjs";
+export { scatterClasses } from "./scatterClasses.mjs";
+export type { ScatterClassKey, ScatterClasses } from "./scatterClasses.mjs";

package/ScatterChart/index.d.ts

@@ -5,5 +5,5 @@ export * from "./ScatterMarker.types.js";
 export * from "./ScatterMarker.js";
 export * from "./FocusedScatterMark.js";
 export * from "./ScatterChart.plugins.js";
-export type { ScatterClasses } from "./scatterClasses.js";
-export { scatterClasses } from "./scatterClasses.js";
+export { scatterClasses } from "./scatterClasses.js";
+export type { ScatterClassKey, ScatterClasses } from "./scatterClasses.js";

package/ScatterChart/scatterClasses.d.mts

@@ -1,8 +1,20 @@
 export interface ScatterClasses {
-  /** Styles applied to the root element. */
+  /** Styles applied to the scatter plot element. */
   root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
 }
 export type ScatterClassKey = keyof ScatterClasses;
 export declare function getScatterUtilityClass(slot: string): string;
 export declare const scatterClasses: ScatterClasses;
-export declare const useUtilityClasses: (classes?: Partial<ScatterClasses>) => Record<"root", string>;
+export interface UseUtilityClassesOptions {
+  classes?: Partial<ScatterClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark", string>;

package/ScatterChart/scatterClasses.d.ts

@@ -1,8 +1,20 @@
 export interface ScatterClasses {
-  /** Styles applied to the root element. */
+  /** Styles applied to the scatter plot element. */
   root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
 }
 export type ScatterClassKey = keyof ScatterClasses;
 export declare function getScatterUtilityClass(slot: string): string;
 export declare const scatterClasses: ScatterClasses;
-export declare const useUtilityClasses: (classes?: Partial<ScatterClasses>) => Record<"root", string>;
+export interface UseUtilityClassesOptions {
+  classes?: Partial<ScatterClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark", string>;

package/ScatterChart/scatterClasses.js

@@ -12,10 +12,16 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getScatterUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiScatterChart', slot);
 }
-const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatterChart', ['root']);
-const useUtilityClasses = classes => {
+const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatterChart', ['root', 'series', 'marker', 'focusedMark']);
+const useUtilityClasses = options => {
+  const {
+    classes
+  } = options ?? {};
   const slots = {
-    root: ['root']
+    root: ['root'],
+    series: ['series'],
+    marker: ['marker'],
+    focusedMark: ['focusedMark']
   };
   return (0, _composeClasses.default)(slots, getScatterUtilityClass, classes);
 };

package/ScatterChart/scatterClasses.mjs

@@ -4,10 +4,16 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getScatterUtilityClass(slot) {
   return generateUtilityClass('MuiScatterChart', slot);
 }
-export const scatterClasses = generateUtilityClasses('MuiScatterChart', ['root']);
-export const useUtilityClasses = classes => {
+export const scatterClasses = generateUtilityClasses('MuiScatterChart', ['root', 'series', 'marker', 'focusedMark']);
+export const useUtilityClasses = options => {
+  const {
+    classes
+  } = options ?? {};
   const slots = {
-    root: ['root']
+    root: ['root'],
+    series: ['series'],
+    marker: ['marker'],
+    focusedMark: ['focusedMark']
   };
   return composeClasses(slots, getScatterUtilityClass, classes);
 };

package/ScatterChart/seriesConfig/legend.js

@@ -4,25 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _getLabel = require("../../internals/getLabel");
-const legendGetter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return seriesOrder.reduce((acc, seriesId) => {
-    const formattedLabel = (0, _getLabel.getLabel)(series[seriesId].label, 'legend');
-    if (formattedLabel === undefined) {
-      return acc;
-    }
-    acc.push({
-      type: 'scatter',
-      markType: series[seriesId].labelMarkType,
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel
-    });
-    return acc;
-  }, []);
-};
+var _legendUtils = require("../../internals/legendUtils");
+const legendGetter = series => (0, _legendUtils.getSeriesLegendItems)('scatter', series);
 var _default = exports.default = legendGetter;

package/ScatterChart/seriesConfig/legend.mjs

@@ -1,22 +1,3 @@
-import { getLabel } from "../../internals/getLabel.mjs";
-const legendGetter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return seriesOrder.reduce((acc, seriesId) => {
-    const formattedLabel = getLabel(series[seriesId].label, 'legend');
-    if (formattedLabel === undefined) {
-      return acc;
-    }
-    acc.push({
-      type: 'scatter',
-      markType: series[seriesId].labelMarkType,
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel
-    });
-    return acc;
-  }, []);
-};
+import { getSeriesLegendItems } from "../../internals/legendUtils.mjs";
+const legendGetter = series => getSeriesLegendItems('scatter', series);
 export default legendGetter;

package/ScatterChart/useScatterChartProps.d.mts

@@ -4,7 +4,7 @@ import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.mjs"
 import { type ChartsGridProps } from "../ChartsGrid/index.mjs";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.mjs";
 import { type ChartsOverlayProps } from "../ChartsOverlay/index.mjs";
-import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import type { ScatterChartProps } from "./ScatterChart.mjs";
 import type { ScatterPlotProps } from "./ScatterPlot.mjs";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.mjs";
@@ -18,7 +18,7 @@ import { type ScatterChartPluginSignatures } from "./ScatterChart.plugins.mjs";
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginSignatures>;
+  chartsContainerProps: ChartsContainerProps<"scatter", ScatterChartPluginSignatures>;
   chartsAxisProps: ChartsAxisProps;
   gridProps: ChartsGridProps;
   scatterPlotProps: ScatterPlotProps;

package/ScatterChart/useScatterChartProps.d.ts

@@ -4,7 +4,7 @@ import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { type ChartsGridProps } from "../ChartsGrid/index.js";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import type { ScatterChartProps } from "./ScatterChart.js";
 import type { ScatterPlotProps } from "./ScatterPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
@@ -18,7 +18,7 @@ import { type ScatterChartPluginSignatures } from "./ScatterChart.plugins.js";
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginSignatures>;
+  chartsContainerProps: ChartsContainerProps<"scatter", ScatterChartPluginSignatures>;
   chartsAxisProps: ChartsAxisProps;
   gridProps: ChartsGridProps;
   scatterPlotProps: ScatterPlotProps;

package/ScatterChart/useScatterChartProps.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _ScatterChart = require("./ScatterChart.plugins");
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "hitAreaRadius", "disableHitArea", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -26,8 +26,8 @@ const useScatterChartProps = props => {
       zAxis,
       series,
       axisHighlight,
-      voronoiMaxRadius,
-      disableVoronoi,
+      hitAreaRadius,
+      disableHitArea,
       width,
       height,
       margin,
@@ -49,8 +49,9 @@ const useScatterChartProps = props => {
   const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
     type: 'scatter'
   }, s)), [series]);
-  const useVoronoiOnItemClick = disableVoronoi !== true || renderer === 'svg-batch';
-  const chartContainerProps = (0, _extends2.default)({}, other, {
+  const resolvedDisableHitArea = disableHitArea;
+  const useVoronoiOnItemClick = resolvedDisableHitArea !== true || renderer === 'svg-batch';
+  const chartsContainerProps = (0, _extends2.default)({}, other, {
     series: seriesWithDefault,
     width,
     height,
@@ -61,8 +62,8 @@ const useScatterChartProps = props => {
     zAxis,
     highlightedItem,
     onHighlightChange,
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick: useVoronoiOnItemClick ? onItemClick : undefined,
     plugins: _ScatterChart.SCATTER_CHART_PLUGINS,
     slots,
@@ -105,7 +106,7 @@ const useScatterChartProps = props => {
   };
   return {
     chartsWrapperProps,
-    chartContainerProps,
+    chartsContainerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,

package/ScatterChart/useScatterChartProps.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "hitAreaRadius", "disableHitArea", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
 import * as React from 'react';
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.mjs";
 /**
@@ -19,8 +19,8 @@ export const useScatterChartProps = props => {
       zAxis,
       series,
       axisHighlight,
-      voronoiMaxRadius,
-      disableVoronoi,
+      hitAreaRadius,
+      disableHitArea,
       width,
       height,
       margin,
@@ -42,8 +42,9 @@ export const useScatterChartProps = props => {
   const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
     type: 'scatter'
   }, s)), [series]);
-  const useVoronoiOnItemClick = disableVoronoi !== true || renderer === 'svg-batch';
-  const chartContainerProps = _extends({}, other, {
+  const resolvedDisableHitArea = disableHitArea;
+  const useVoronoiOnItemClick = resolvedDisableHitArea !== true || renderer === 'svg-batch';
+  const chartsContainerProps = _extends({}, other, {
     series: seriesWithDefault,
     width,
     height,
@@ -54,8 +55,8 @@ export const useScatterChartProps = props => {
     zAxis,
     highlightedItem,
     onHighlightChange,
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick: useVoronoiOnItemClick ? onItemClick : undefined,
     plugins: SCATTER_CHART_PLUGINS,
     slots,
@@ -98,7 +99,7 @@ export const useScatterChartProps = props => {
   };
   return {
     chartsWrapperProps,
-    chartContainerProps,
+    chartsContainerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,

package/SparkLineChart/SparkLineChart.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type ChartsColor } from "../colorPalettes/index.mjs";
-import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import type { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.mjs";
 import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.mjs";
 import type { XAxis, YAxis } from "../models/axis.mjs";
@@ -13,7 +13,7 @@ import type { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.mjs";
 import type { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.mjs";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'axesGap' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
+export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartsContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'axesGap' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.

package/SparkLineChart/SparkLineChart.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type ChartsColor } from "../colorPalettes/index.js";
-import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import type { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
 import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import type { XAxis, YAxis } from "../models/axis.js";
@@ -13,7 +13,7 @@ import type { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
 import type { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'axesGap' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
+export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartsContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'axesGap' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.

package/SparkLineChart/SparkLineChart.js

@@ -15,7 +15,7 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _ChartsClipPath = require("../ChartsClipPath");
 var _BarChart = require("../BarChart");
 var _LineChart = require("../LineChart");
-var _ChartDataProvider = require("../ChartDataProvider");
+var _ChartsDataProvider = require("../ChartsDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
@@ -110,7 +110,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
   }, yAxisProps, {
     position: 'none'
   })], [yAxisProps]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartDataProvider.ChartDataProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsDataProvider.ChartsDataProvider, {
     series: series,
     width: width,
     height: height,
@@ -226,6 +226,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -240,10 +244,17 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   disableClipping: _propTypes.default.bool,
   /**
-   * If true, the voronoi interaction are ignored.
+   * If true, the hit area interaction is disabled and falls back to hover events.
    */
-  disableVoronoi: _propTypes.default.bool,
-  enableKeyboardNavigation: _propTypes.default.bool,
+  disableHitArea: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -345,6 +356,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['radar']).isRequired
   })]),
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius: _propTypes.default.oneOfType([_propTypes.default.oneOf(['item']), _propTypes.default.number]),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -473,7 +490,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**
@@ -510,6 +527,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The controlled axis tooltip.
@@ -557,12 +578,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default (value: number | null) => (value === null ? '' : value.toString())
    */
   valueFormatter: _propTypes.default.func,
-  /**
-   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
-   * If set to `'item'`, the radius is the `markerSize`.
-   * If `undefined`, the radius is assumed to be infinite.
-   */
-  voronoiMaxRadius: _propTypes.default.oneOfType([_propTypes.default.oneOf(['item']), _propTypes.default.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -576,6 +591,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -634,6 +650,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -692,6 +709,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -737,6 +755,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -783,6 +802,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -828,6 +848,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -873,6 +894,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -922,6 +944,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -971,6 +994,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1023,6 +1047,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -1080,6 +1105,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -1137,6 +1163,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1181,6 +1208,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1226,6 +1254,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1270,6 +1299,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1314,6 +1344,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1362,6 +1393,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1410,6 +1442,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),