use band scale instead

mui · Mar 4, 2025 · f8b984a · f8b984a
1 parent 87a6b94
commit f8b984a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 31 deletions.
diff --git a/docs/data/charts/axis/OverlappingAxes.js b/docs/data/charts/axis/OverlappingAxes.js
@@ -1,19 +1,19 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { BarChart } from '@mui/x-charts/BarChart';
 
 export default function OverlappingAxes() {
   return (
-    <LineChart
+    <BarChart
       xAxis={[
         {
-          scaleType: 'time',
+          scaleType: 'band',
           data: time,
           valueFormatter: formatShortMonth,
           height: 0,
           tickLabelPlacement: 'middle',
         },
         {
-          scaleType: 'time',
+          scaleType: 'band',
           data: time,
           tickInterval: time.filter((_, index) => index % 3 === 0),
           valueFormatter: formatQuarterYear,
@@ -57,7 +57,6 @@ const time = [
   new Date(2015, 9, 1),
   new Date(2015, 10, 1),
   new Date(2015, 11, 1),
-  new Date(2016, 0, 1),
 ];
 
 const a = [
@@ -76,19 +75,18 @@ const chartConfig = {
   series: [
     {
       data: getPercents(a),
-      type: 'line',
-      label: 'a',
-      area: true,
-      stack: 'total',
-      showMark: false,
+      label: 'Income',
+      valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`,
     },
     {
       data: getPercents(b),
-      type: 'line',
-      label: 'b',
-      area: true,
-      stack: 'total',
-      showMark: false,
+      label: 'Expenses',
+      valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`,
+    },
+  ],
+  yAxis: [
+    {
+      valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`,
     },
   ],
 };
diff --git a/docs/data/charts/axis/OverlappingAxes.tsx b/docs/data/charts/axis/OverlappingAxes.tsx
@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { BarChart } from '@mui/x-charts/BarChart';
 import { AxisValueFormatterContext } from '@mui/x-charts/models';
 
 export default function OverlappingAxes() {
   return (
-    <LineChart
+    <BarChart
       xAxis={[
         {
-          scaleType: 'time',
+          scaleType: 'band',
           data: time,
           valueFormatter: formatShortMonth,
           height: 0,
           tickLabelPlacement: 'middle',
         },
         {
-          scaleType: 'time',
+          scaleType: 'band',
           data: time,
           tickInterval: time.filter((_, index) => index % 3 === 0),
           valueFormatter: formatQuarterYear,
@@ -58,7 +58,6 @@ const time = [
   new Date(2015, 9, 1),
   new Date(2015, 10, 1),
   new Date(2015, 11, 1),
-  new Date(2016, 0, 1),
 ];
 const a = [
   4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800, 2400,
@@ -75,19 +74,18 @@ const chartConfig = {
   series: [
     {
       data: getPercents(a),
-      type: 'line',
-      label: 'a',
-      area: true,
-      stack: 'total',
-      showMark: false,
+      label: 'Income',
+      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
     },
     {
       data: getPercents(b),
-      type: 'line',
-      label: 'b',
-      area: true,
-      stack: 'total',
-      showMark: false,
+      label: 'Expenses',
+      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
+    },
+  ],
+  yAxis: [
+    {
+      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
     },
   ],
 } as const;
diff --git a/packages/x-charts/src/hooks/useTicks.ts b/packages/x-charts/src/hooks/useTicks.ts
@@ -121,7 +121,10 @@ export function useTicks(
             labelOffset:
               tickLabelPlacement === 'tick'
                 ? 0
-                : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement]),
+                : scale.step() *
+                  (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement]) *
+                  // Only really works if ticks are evenly spaced
+                  (domain.length !== filteredDomain.length ? filteredDomain.length - 1 : 1),
           })),
 
           ...(tickPlacement === 'extremities'