Help me display values on top of MarkerCircles, please

[timurcatakli]

Below is my chart and the code. How can I display values on top of each markercircle please...
Similar to

Here is my chart

import React from "react";
import styled from "styled-components";
import { Axis, Grid, LineSeries, XYChart, Tooltip } from "@visx/xychart";
import { scaleTime, scaleLinear } from "@visx/scale";
import { MarkerCircle } from "@visx/marker";
import { curveBasis } from "@visx/curve";
import { max, min } from "d3-array";
import { tooltipDateFormatter } from "./helpers";

const TooltipWrapper = styled.div`
  max-width: 200px;
  font-family: Larsseit;
  font-size: 14px;
  font-weight: 100;

  .tooltip-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20px;
    gap: 10px;
  }

  .tooltip-row__date {
    margin-top: 6px;
    font-size: 12px;
  }
`;

const tickLabelProps = {
  fontSize: "12px",
  fontFamily: "Larsseit",
  fontWeight: "normal",
  fill: "#767676",
  textAnchor: "middle",
};

const gridLineStyle = {
  stroke: "#cac8c8",
  strokeLinecap: "round",
  strokeWidth: 0.4,
  strokeDasharray: "4",
};

const LineChart = (props) => {
  const { legends, data, width, height } = props;

  const maxValue = max(data, (point) => {
    const values = legends.map((legend) => point[legend.name]);
    return Math.max(...values) || 0;
  });

  const minValue = min(data, (point) => {
    const values = legends.map((legend) => point[legend.name]);
    return Math.min(...values) || 0;
  });

  // ----------------SCALES-----------------------------
  const timeScale = scaleTime({
    domain: [data[0].timestamp, data[data.length - 1].timestamp],
    range: [0, width],
  });

  const valueScale = scaleLinear({
    domain: [minValue, maxValue],
    range: [height, 0],
  });

  // -----------------------------------------------------
  return (
    <XYChart
      id="xy-chart"
      height={height}
      width={width}
      xScale={{ type: "time" }}
      yScale={{ type: "linear" }}
    >
      {/* <rect height={height} width={width}></rect> */}
      <Axis
        scale={timeScale}
        hideTicks
        hideAxisLine
        numTicks={6}
        orientation="bottom"
        stroke={tickLabelProps.fill}
        tickStroke={tickLabelProps.fill}
        tickLabelProps={() => tickLabelProps}
      />
      <Axis
        left={30}
        scale={valueScale}
        hideAxisLine
        hideTicks
        numTicks={6}
        orientation="left"
        stroke={tickLabelProps.fill}
        tickStroke={tickLabelProps.fill}
        tickLabelProps={() => tickLabelProps}
      />
      <Grid numTicks={6} lineStyle={gridLineStyle} />

      <MarkerCircle id="marker-circle" fill="#333" size={1.4} refX={1} />
      {legends.map((legend) => {
        const { name, color } = legend;
        return (
          <LineSeries
            curve={curveBasis}
            data={data}
            key={name}
            dataKey={name}
            markerMid="url(#marker-circle)"
            xAccessor={(d) => d.timestamp}
            yAccessor={(d) => d[name]}
            stroke={color}
          />
        );
      })}
      <Tooltip
        snapTooltipToDatumX
        snapTooltipToDatumY
        showVerticalCrosshair
        // showSeriesGlyphs
        // showDatumGlyph
        renderTooltip={({ tooltipData }) => {
          return (
            <TooltipWrapper>
              {legends.map((legend) => {
                return (
                  <div
                    key={`${legend.name}-tooltip`}
                    className="tooltip-row"
                    style={{ color: legend.color }}
                  >
                    <div>{legend.name}:</div>
                    <div>{tooltipData.nearestDatum.datum[legend.name]}</div>
                  </div>
                );
              })}
              <div className="tooltip-row__date">
                {tooltipDateFormatter(tooltipData.nearestDatum.datum.timestamp)}
              </div>
            </TooltipWrapper>
          );
        }}
      />
    </XYChart>
  );
};

export default LineChart;

[williaster]

Hey @timurcatakli 👋 thanks for checking out visx. I just answered a similar question here so maybe check that out!

[timurcatakli]

Thank you, will check