[charts] Support BarChart with Date data

docs/pages/x/api/charts/axis-config.json

@@ -3,8 +3,10 @@
  "imports": ["import { AxisConfig } from '@mui/x-charts'"],
  "properties": {
  "id": { "type": { "description": "AxisId" }, "required": true },
- "scaleType": { "type": { "description": "'linear'" }, "required": true },
- "colorMap": { "type": { "description": "ContinuousColorConfig | PiecewiseColorConfig" } },
+ "scaleType": { "type": { "description": "'band'" }, "required": true },
+ "colorMap": {
+ "type": { "description": "OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig" }
+ },
  "data": { "type": { "description": "V[]" } },
  "dataKey": { "type": { "description": "string" } },
  "hideTooltip": { "type": { "description": "boolean" } },

packages/x-charts/src/context/CartesianProvider/computeValue.ts

@@ -1,4 +1,4 @@
-import { scaleBand, scalePoint } from 'd3-scale';
+import { scaleBand, scalePoint, scaleTime } from 'd3-scale';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
 import { AxisConfig, ScaleName } from '../../models';
 import {
@@ -27,6 +27,18 @@ const getRange = (drawingArea: DrawingArea, axisName: 'x' | 'y', isReverse?: boo
  return isReverse ? range.reverse() : range;
 };
 
+const isDateData = (data?: any[]): data is Date[] => data?.[0] instanceof Date;
+
+function createDateFormatter(
+ axis: AxisConfig<'band' | 'point', any, ChartsAxisProps>,
+ range: number[],
+): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'] {
+ const timeScale = scaleTime(axis.data!, range);
+
+ return (v, { location }) =>
+ location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+}
+
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 
@@ -99,6 +111,11 @@ export function computeValue(
  ? getOrdinalColorScale({ values: axis.data, ...axis.colorMap })
  : getColorScale(axis.colorMap)),
  };
+
+ if (isDateData(axis.data)) {
+ const dateFormatter = createDateFormatter(axis, scaleRange);
+ completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+ }
  }
  if (isPointScaleConfig(axis)) {
  const scaleRange = axisName === 'x' ? range : [...range].reverse();
@@ -113,6 +130,11 @@ export function computeValue(
  ? getOrdinalColorScale({ values: axis.data, ...axis.colorMap })
  : getColorScale(axis.colorMap)),
  };
+
+ if (isDateData(axis.data)) {
+ const dateFormatter = createDateFormatter(axis, scaleRange);
+ completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+ }
  }
  if (axis.scaleType === 'band' || axis.scaleType === 'point') {
  // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.

packages/x-charts/src/hooks/useTicks.ts

@@ -101,8 +101,12 @@ export function useTicks(
 
  if (scale.bandwidth() > 0) {
  // scale type = 'band'
+ const filteredDomain =
+ (typeof tickInterval === 'function' && domain.filter(tickInterval)) ||
+ (typeof tickInterval === 'object' && tickInterval) ||
+ domain;
  return [
- ...domain.map((value) => ({
+ ...filteredDomain.map((value) => ({
  value,
  formattedValue: valueFormatter?.(value, { location: 'tick' }) ?? `${value}`,
  offset:

packages/x-charts/src/models/axis.ts

@@ -156,7 +156,7 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
  position?: 'top' | 'bottom';
 }
 
-export type ScaleName = 'linear' | 'band' | 'point' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
+export type ScaleName = keyof AxisScaleConfig;
 export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
 
 export interface AxisScaleConfig {