Fix more type issues

Author: bernardobelchior

docs/data/charts/bars/bars.md

@@ -141,6 +141,10 @@ The bar charts use by priority:
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
+:::warning
+The `colorMap` property does not work for the numerical axis of bar range charts (i.e., the y-axis for vertical bar charts and the x-axis for horizontal bar charts).
+:::
+
 {{"demo": "ColorScale.js"}}
 
 ### Border radius

packages/x-charts/src/BarChart/seriesConfig/barRangeGetColor.ts

@@ -4,22 +4,8 @@ const getColor: ColorProcessor<'barRange'> = (series, xAxis, yAxis) => {
   const verticalLayout = series.layout === 'vertical';
 
   const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
-  const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
   const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
 
-  if (valueColorScale) {
-    return (dataIndex?: number) => {
-      if (dataIndex === undefined) {
-        return series.color;
-      }
-      const value = series.data[dataIndex];
-      const color = value === null ? series.color : valueColorScale(value);
-      if (color === null) {
-        return series.color;
-      }
-      return color;
-    };
-  }
   if (bandColorScale && bandValues) {
     return (dataIndex?: number) => {
       if (dataIndex === undefined) {

packages/x-charts/src/BarChart/seriesConfig/index.ts

@@ -8,6 +8,9 @@ import seriesProcessor from './seriesProcessor';
 import legendGetter from './legend';
 import getColor from './getColor';
 import tooltipGetter, { axisTooltipGetter } from './tooltip';
+import barRangeTooltipGetter, {
+  axisTooltipGetter as barRangeAxisTooltipGetter,
+} from './barRangeTooltip';
 import tooltipItemPositionGetter from './tooltipPosition';
 import { getSeriesWithDefaultValues } from './getSeriesWithDefaultValues';
 import barRangeSeriesProcessor from './barRangeSeriesProcessor';
@@ -29,9 +32,9 @@ export const barRangeSeriesConfig: ChartSeriesTypeConfig<'barRange'> = {
   seriesProcessor: barRangeSeriesProcessor,
   colorProcessor: barRangeGetColor,
   legendGetter,
-  tooltipGetter,
+  tooltipGetter: barRangeTooltipGetter,
   tooltipItemPositionGetter,
-  axisTooltipGetter,
+  axisTooltipGetter: barRangeAxisTooltipGetter,
   xExtremumGetter: getBarRangeExtremumX,
   yExtremumGetter: getBarRangeExtremumY,
   getSeriesWithDefaultValues: (...args) => getSeriesWithDefaultValues<'barRange'>(...args),

packages/x-charts/src/BarChart/seriesConfig/tooltip.ts

@@ -1,7 +1,7 @@
 import { getLabel } from '../../internals/getLabel';
 import type { AxisTooltipGetter, TooltipGetter } from '../../internals/plugins/models';
 
-const tooltipGetter: TooltipGetter<'bar' | 'barRange'> = (params) => {
+const tooltipGetter: TooltipGetter<'bar'> = (params) => {
   const { series, getColor, identifier } = params;
 
   if (!identifier || identifier.dataIndex === undefined) {
@@ -27,7 +27,7 @@ const tooltipGetter: TooltipGetter<'bar' | 'barRange'> = (params) => {
   };
 };
 
-export const axisTooltipGetter: AxisTooltipGetter<'bar' | 'barRange', 'x' | 'y'> = (series) => {
+export const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'> = (series) => {
   return Object.values(series).map((s) =>
     s.layout === 'horizontal'
       ? { direction: 'y', axisId: s.yAxisId }

packages/x-charts/src/BarChart/seriesConfig/tooltipPosition.ts

@@ -1,7 +1,7 @@
 import type { TooltipItemPositionGetter } from '../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types';
 import { getBarDimensions } from '../useBarPlotData';
 
-const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar'> = (params) => {
+const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar' | 'barRange'> = (params) => {
   const { series, identifier, axesConfig, placement } = params;
 
   if (!identifier || identifier.dataIndex === undefined) {

packages/x-charts/src/BarChart/useBarRangePlotData.ts

@@ -6,6 +6,7 @@ import { checkScaleErrors } from './checkScaleErrors';
 import { SeriesProcessorResult } from '../internals/plugins/models/seriesConfig/seriesProcessor.types';
 import { ComputedAxisConfig } from '../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types';
 import { useBarRangeSeriesContext } from '../hooks/useBarRangeSeries';
+import barRangeGetColor from './seriesConfig/barRangeGetColor';
 
 export function useBarRangePlotData(
   drawingArea: ChartDrawingArea,
@@ -50,7 +51,7 @@ export function useBarRangePlotData(
     const xScale = xAxisConfig.scale;
     const yScale = yAxisConfig.scale;
 
-    const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+    const colorGetter = barRangeGetColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
     const bandWidth = baseScaleConfig.scale.bandwidth();
 
     const { barWidth, offset } = getBandSize({