Can we add image or icon on y-axis

[vishal957132]

Is it possible to achieve this type of graph as shown below?

According to me I tried and got this type of graph as shown below

But need to fix 4 things in above i.e.

1. Emojis must be replaced with icons or images
2. Dot to Dot connection must be curve
3. Line which is connecting to dots must be gradient
4. In some cases line which are connecting 2 dots has 2 different colors

import React from "react";
import { CartesianChart } from "victory-native";
import {
  Image,
  Line,
  useFont,
  useImage,
} from "@shopify/react-native-skia";
import EmojiFont from "../../assets/fonts/Segoe_UI_Emoji.ttf";
import { wp } from "../utils/ResponsiveScreen";

export const Screen = () => {
  const data = [
    {
      x: "S",
      val: 1,
      date: 1716076800000,
    },
    {
      x: "M",
      val: 2,
      date: 1716163200000,
    },
    {
      x: "T",
      val: 6,
      date: 1716249600000,
    },
    {
      x: "W",
      val: 3,
      date: 1716336000000,
    },
    {
      x: "T",
      val: 7,
      date: 1716422400000,
    },
    {
      x: "F",
      val: 5,
      date: 1716508800000,
    },
    {
      x: "S",
      val: 4,
      date: 1716595200000,
    },
  ];

  const smileys = ["😠", "☹️", "🙁", "😐", "🙂", "😊", "😀"];
  const redDotImage = useImage(require("../../assets/images/redDot.png"));
  const greenDotImage = useImage(require("../../assets/images/blueDot.png"));
  const greyDotImage = useImage(require("../../assets/images/greyDot.png"));

  return (
    <CartesianChart
      data={data}
      xKey="x"
      yKeys={["val", "date"]}
      padding={wp(5)}
      domainPadding={{ left: wp(3), right: wp(3), top: wp(1) }}
      domain={{ y: [0, 7] }}
      axisOptions={{
        font: useFont(EmojiFont, 16),
        tickCount: 7,
        lineColor: {
          grid: { x: "#d4d4d8", y: "#A5A9A9" },
          frame: "#d4d4d8",
        },
        labelColor: "#121723",
        formatYLabel(label): string {
          let labelVal = "";
          if (label > 0 && label < 8) {
            labelVal = smileys[label - 1];
          }
          return labelVal;
        },
      }}
    >
      {({ points }) => {
        const pointsArray = points.val
          .filter((item: any) => item.yValue !== 0)
          .map((item: any) => ({
            x: item.x,
            xValue: String(item.xValue),
            y: item.y as number,
            yValue: item.yValue as number,
          }));
        return pointsArray.map((item: any, index: number) => {
          let lineColor = "#B74B4B";
          if (pointsArray[index + 1]?.yValue > 4) {
            lineColor = "#417777";
          } else if (pointsArray[index + 1]?.yValue === 4) {
            lineColor = "#A5A9A9";
          }
          return (
            <>
              {pointsArray.length > 1 && index < pointsArray.length - 1 && (
                <Line
                  p1={{ x: pointsArray[index].x, y: pointsArray[index].y }}
                  p2={{
                    x: pointsArray[index + 1].x,
                    y: pointsArray[index + 1].y,
                  }}
                  color={lineColor}
                  strokeWidth={3}
                />
              )}
              <Image
                key={String(item.x)}
                image={
                  item?.yValue === 4
                    ? greyDotImage
                    : item?.yValue > 4
                    ? greenDotImage
                    : redDotImage
                }
                fit="contain"
                x={item.x - wp(3)}
                y={item?.y - wp(2)}
                width={wp(6)}
                height={wp(6)}
              />
            </>
          );
        });
      }}
    </CartesianChart>
  );
};