MUI charts how to highlight a specific y-axis tick label?

Question

I want to highlight a specific Y-axis tick label by drawing a circle around the text of that label.

Below is the code where I have implemented a bar chart with a reference line at y=2. Now, I want to highlight the value "2" in the Y-axis tick label.

import * as React from "react";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { ResponsiveChartContainer } from "@mui/x-charts/ResponsiveChartContainer";
import { BarPlot } from "@mui/x-charts/BarChart";
import { ChartsXAxis } from "@mui/x-charts/ChartsXAxis";
import { ChartsYAxis } from "@mui/x-charts/ChartsYAxis";
import { ChartsReferenceLine } from "@mui/x-charts/ChartsReferenceLine";

export default function BasicComposition() {
  return (
    <Box sx={{ width: "100%" }}>
      <Paper sx={{ width: "100%", height: 300 }} elevation={3}>
        <ResponsiveChartContainer
          series={[
            {
              type: "bar",
              data: [1, 2, 3, 2, 1],
            },
          ]}
          xAxis={[
            {
              data: ["A", "B", "C", "D", "E"],
              scaleType: "band",
              id: "x-axis-id",
            },
          ]}
          yAxis={[{ id: "left" }]}
          {...{ width: 500, height: 300 }}
        >
          <BarPlot />
          <ChartsReferenceLine
            y={2}
            axisId={"left"}
            lineStyle={{ strokeDasharray: "10 5", strokeWidth: 2 }}
          />
          <ChartsXAxis label="X axis" position="bottom" axisId="x-axis-id" />
          <ChartsYAxis label="Y axis" position="left" axisId="left" />
        </ResponsiveChartContainer>
      </Paper>
    </Box>
  );
}

Above code output -> Output

What changes I need to make in the code to get below output?

Desired output

Can someone help me achieve the Desired output?

Answer 1

Achieved the desired output by using a custom svg circle using MUI axis/scales hooks

import * as React from "react";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { ResponsiveChartContainer } from "@mui/x-charts/ResponsiveChartContainer";
import { BarPlot } from "@mui/x-charts/BarChart";
import { ChartsXAxis } from "@mui/x-charts/ChartsXAxis";
import { ChartsYAxis } from "@mui/x-charts/ChartsYAxis";
import { ChartsReferenceLine } from "@mui/x-charts/ChartsReferenceLine";
import { useDrawingArea, useYAxis } from "@mui/x-charts";

const CircleAnnotation = ({ value }: { value: number }) => {
  const axis = useYAxis("left");
  const { left } = useDrawingArea();
  const scale = axis.scale;

  return (
    <circle
      strokeWidth={2}
      stroke="black"
      fill="transparent"
      r={10}
      cx={left - 12}
      cy={scale(value)}
    />
  );
};

export default function BasicComposition() {
  const highlightedValue = 1;
  return (
    <Box sx={{ width: "100%" }}>
      <Paper sx={{ width: "100%", height: 300 }} elevation={3}>
        <ResponsiveChartContainer
          series={[
            {
              type: "bar",
              data: [1, 2, 3, 2, 1],
            },
          ]}
          xAxis={[
            {
              data: ["A", "B", "C", "D", "E"],
              scaleType: "band",
              id: "x-axis-id",
            },
          ]}
          yAxis={[{ id: "left" }]}
          {...{ width: 500, height: 300 }}
        >
          <BarPlot />
          <ChartsReferenceLine
            y={highlightedValue}
            axisId={"left"}
            lineStyle={{ strokeDasharray: "10 5", strokeWidth: 2 }}
          />
          <ChartsXAxis label="X axis" position="bottom" axisId="x-axis-id" />
          <ChartsYAxis label="Y axis" position="left" axisId="left" />
          <CircleAnnotation value={highlightedValue} />
        </ResponsiveChartContainer>
      </Paper>
    </Box>
  );
}

Above Solution is given by MUI member