I want to build an area graph. It has an area chart representing the loss probability, with the probability on the y axis and the modeled loss on the x axis.
Also there is an explanatory graph, with segments and arrows, that explains to the user which parts of the area graph represent each concept.
So the segments are in two rows. The first row contains the Expected loss followed by the Unexpected loss.
The second row, contains the Value at Risk at 95th % (equals to expected loss plus unexpected loss) and the Exceptional Loss (the missing 5%).

Give it a try. You can use any of the best charting libraries out there.
Chart Description
Line Graph
X-Axis (Horizontal Axis): Represents monetary values ranging from $0 to $70 million.
Y-Axis (Vertical Axis): Not explicitly labeled, but it shows the probability distribution of losses.

Data Representation:
The line starts at the top left corner at $0.0 (Most Probable Loss) and gradually slopes downwards to the right.
There is a specific point labeled as $15.2M (Expected Loss).
The line continues to decrease until it reaches a point labeled as $63M.

Labeled Grid
X-Axis (Horizontal Axis): Represents monetary values ranging from $0 to $70 million, with specific ticks at $10M intervals.
Y-Axis (Vertical Axis): Contains labels indicating different financial metrics:
Expected Loss
Income
Unexpected Loss
Capital / Balance Sheet
Value at Risk (95th %)
Exceptional Loss
Insurance
Annotations:
Expected Loss: Marked at $15.2M.
Exceptional Loss: Marked at $63M.

This is what I've made so far:

"use client"

import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Customized } from "recharts"

const data = [
  { loss: 0, probability: 100 },
  { loss: 15.2, probability: 50 },
  { loss: 30, probability: 25 },
  { loss: 45, probability: 10 },
  { loss: 60, probability: 5 },
  { loss: 70, probability: 0 },
]

const CustomizedLines = ({ xAxis, yAxis, width, height }) => {
  const getXPosition = (loss) => xAxis.scale(loss)

  return (
    <g>
      <line x1={0} y1={height + 25} x2={width} y2={height + 25} stroke="black" strokeWidth={1} />
      <line
        x1={getXPosition(15.2)}
        y1={height}
        x2={getXPosition(15.2)}
        y2={height + 50}
        stroke="black"
        strokeWidth={1}
        strokeDasharray="3 3"
      />
      <text x={0} y={height + 20} className="text-xs" fill="black">
        Expected Loss
      </text>
      <text x={0} y={height + 40} className="text-xs" fill="black">
        Income
      </text>
      <line
        x1={getXPosition(45)}
        y1={height}
        x2={getXPosition(45)}
        y2={height + 50}
        stroke="black"
        strokeWidth={1}
        strokeDasharray="3 3"
      />
      <text x={width / 2} y={height + 20} className="text-xs" textAnchor="middle" fill="black">
        Unexpected Loss
      </text>
      <text x={width / 2} y={height + 40} className="text-xs" textAnchor="middle" fill="black">
        Capital / Balance Sheet
      </text>
      <line x1={0} y1={height + 75} x2={width} y2={height + 75} stroke="black" strokeWidth={1} />
      <line
        x1={getXPosition(60)}
        y1={height + 50}
        x2={getXPosition(60)}
        y2={height + 100}
        stroke="black"
        strokeWidth={1}
        strokeDasharray="3 3"
      />
      <text x={0} y={height + 70} className="text-xs" fill="black">
        Value at Risk (95th %)
      </text>
      <line
        x1={getXPosition(70)}
        y1={height + 50}
        x2={getXPosition(70)}
        y2={height + 100}
        stroke="black"
        strokeWidth={1}
        strokeDasharray="3 3"
      />
      <text x={width * 0.75} y={height + 70} className="text-xs" textAnchor="middle" fill="black">
        Exceptional Loss
      </text>
      <text x={width * 0.75} y={height + 90} className="text-xs" textAnchor="middle" fill="black">
        Insurance
      </text>
    </g>
  )
}

const RiskOverviewChart = () => {
  const maxLoss = Math.max(...data.map((d) => d.loss))

  return (
    <div className="w-full h-[500px] bg-white p-4 rounded-lg shadow">
      <h2 className="text-xl font-bold mb-4">Loss Distribution</h2>
      <ResponsiveContainer width="100%" height={450}>
        <AreaChart
          data={data}
          margin={{ top: 10, right: 30, left: 60, bottom: 100 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis
            dataKey="loss"
            type="number"
            tickFormatter={(value) => `$${value}M`}
            domain={[0, maxLoss]}
          />
          <YAxis tickFormatter={(value) => `${value}%`} />
          <Tooltip
            formatter={(value, name) => [
              name === "probability" ? `${value}%` : `$${value}M`,
              name,
            ]}
          />
          <Area
            type="monotone"
            dataKey="probability"
            stroke="#3b82f6"
            fill="#3b82f6"
            fillOpacity={0.3}
          />
          <Customized component={CustomizedLines} />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  )
}

export default RiskOverviewChart;