reactjs - Je li moguće dodati mrežne linije na MUI X grafove Bar chart?

Želim napraviti grafikon koristeći MUI X stupčasti graf.

import { BarChart } from ‘@mui/x-charts/BarChart;

Specifično tražim samo dodavanje horizontalnih mrežnih linija koje se protežu od automatski postavljenih oznaka na y-osi, ali mislio sam da bi također bilo korisno znati može li se dodati i vertikalne mrežne linije u slučaju da budući korisnici traže slična rješenja za ostale dostupne grafikone (npr. mislio bih da bi vertikalne mrežne linije bile korisne u slučaju linijskog grafikona).

Nisam zaista mogao ništa isprobati jer nisam siguran kako uopće krenuti s time (nov sam u Reactu i korištenju MUI komponenti pa još učim kako stilizirati elemente)

Odgovor #1

Na Githubu je otvoren problem za ovu značajku: https://github.com/mui/mui-x/issues/10158

U međuvremenu možete stvoriti prilagođeni stilizirani Path i koristiti d3-scale za određivanje položaja linije i njezino crtanje pomoću path

Primjer :

import * as React from 'react';
import { styled } from '@mui/material/styles';
import { ScaleLinear } from 'd3-scale';
import {
  ResponsiveChartContainer,
  LinePlot,
  useDrawingArea,
  useYScale,
  useXScale,
} from '@mui/x-charts';

const x = Array.from({ length: 21 }, (_, index) => -1 + 0.2 * index);
const linear = x.map((v) => -1 + v);
const poly = x.map((v) => -1 + v ** 2 - v);

const StyledPath = styled('path')<{ color: 'primary' | 'secondary' }>(
  ({ theme, color }) => ({
    fill: 'none',
    stroke: theme.palette.text[color],
    shapeRendering: 'crispEdges',
    strokeWidth: 1,
    pointerEvents: 'none',
  }),
);

function CartesianAxis() {
  // Get the drawing area bounding box
  const { left, top, width, height } = useDrawingArea();

  // Get the two scale
  const yAxisScale = useYScale() as ScaleLinear<any, any>;
  const xAxisScale = useXScale() as ScaleLinear<any, any>;

  const yOrigin = yAxisScale(0);
  const xOrigin = xAxisScale(0);

  const xTicks = [-2, -1, 1, 2, 3];
  const yTicks = [-2, -1, 1, 2, 3, 4, 5];

  return (
    <React.Fragment>
      {yTicks.map((value) => (
        <StyledPath
          key={value}
          d={`M ${left} ${yAxisScale(value)} l ${width} 0`}
          color="secondary"
        />
      ))}
      {xTicks.map((value) => (
        <>
        <h6>hhh</h6>
        <StyledPath
          key={value}
          d={`M ${xAxisScale(value)} ${top} l 0 ${height}`}
          color="secondary"
        />
        </>
      ))}
      <StyledPath d={`M ${left} ${yOrigin} l ${width} 0`} color="primary" />
      <StyledPath d={`M ${xOrigin} ${top} l 0 ${height}`} color="primary" />
    </React.Fragment>
  );
}
export default function OriginDemo() {
  return (
    <ResponsiveChartContainer
      margin={{ top: 5, left: 5, right: 5, bottom: 5 }}
      height={300}
      series={[
        {
          type: 'line',
          data: linear,
        },

        {
          type: 'line',
          data: poly,
        },
      ]}
      xAxis={[{ data: x, scaleType: 'linear', min: -1, max: 3 }]}
      yAxis={[{ min: -2, max: 5 }]}
    >
      <CartesianAxis />
      <LinePlot />
    </ResponsiveChartContainer>
  );
}

I dalje možete koristiti svoj Chart komponentu (npr.: <BarChart/>) i staviti <Tooltip/> unutar nje, kao djecu:

<BarChart>
  <CartisianAxis/>
<BarChart/>

Evo demo verzije: https://codesandbox.io/s/tender-napier-3htnp6?file=/src/Demo.tsx:1333-1343

Odgovor #2

MUI X v7(beta) podržava rešetkaste linije 🎉