Slope Chart

import Chart from 'chart.js/auto';

// Illustrative data used by the live preview.
const chartData = {
  "categoryLabel": "Service",
  "labels": [
    "Setup",
    "Billing",
    "Access",
    "Exports"
  ],
  "datasets": [
    {
      "label": "Round 1",
      "data": [
        42,
        78,
        60,
        28
      ],
      "backgroundColor": "#3b82f6",
      "borderColor": "#3b82f6"
    },
    {
      "label": "Round 2",
      "data": [
        65,
        62,
        60,
        45
      ],
      "backgroundColor": "#0d9488",
      "borderColor": "#0d9488"
    }
  ]
};

function createConfig(chartData) {
    const labels = chartData.labels;
    const periods = chartData.datasets.map(series => series.label);
    const rows = labels.map((label, row) => ({ label, values: chartData.datasets.map(series => Number(series.data[row])) }));
    const values = rows.flatMap(row => row.values);
    const low = Math.min(0, ...values), high = Math.max(0, ...values), pad = (high - low || 1) * 0.06;
    const domain = [low - pad, high + pad];
    const colors = ['#3b82f6', '#0d9488', '#d97706', '#9333ea', '#e11d48', '#475569'];
    const shorten = (value, max = 10) => value.length > max ? `${value.slice(0, max - 1)}…` : value;
    const compact = (value) => Math.abs(value) >= 1e4 ? value.toExponential(2) : String(Number(value.toPrecision(4)));
    const labelText = (row, side) => `${shorten(labels[row])} ${compact(rows[row].values[side])}`;
    const visible = [0, 1].map(side => {
        const selected = new Set();
        let last = Infinity;
        rows.map((row, index) => ({ value: row.values[side], index })).sort((a, b) => b.value - a.value || a.index - b.index).forEach(item => {
            if (last - item.value >= (domain[1] - domain[0]) * 0.075) {
                selected.add(item.index);
                last = item.value;
            }
        });
        return selected;
    });
    return {
        type: 'line',
        data: { labels: periods, datasets: rows.map((row, index) => ({
                label: row.label, data: row.values, borderColor: colors[index % colors.length],
                backgroundColor: colors[index % colors.length], pointBackgroundColor: ['#ffffff', colors[index % colors.length]],
                pointBorderWidth: 2, pointRadius: 4, borderWidth: 2, tension: 0, fill: false,
            })) },
        plugins: [{ id: 'endpoint-labels', afterDatasetsDraw: chart => {
                    const ctx = chart.ctx;
                    ctx.save();
                    ctx.font = '11px sans-serif';
                    ctx.textBaseline = 'middle';
                    rows.forEach((_, row) => chart.getDatasetMeta(row).data.forEach((point, side) => {
                        if (!visible[side].has(row))
                            return;
                        ctx.fillStyle = colors[row % colors.length];
                        ctx.textAlign = side === 0 ? 'right' : 'left';
                        ctx.fillText(labelText(row, side), point.x + (side === 0 ? -9 : 9), point.y, 87);
                    }));
                    ctx.restore();
                } }],
        options: {
            responsive: true, maintainAspectRatio: false, layout: { padding: { left: 98, right: 98, bottom: 15 } },
            plugins: { legend: { display: false }, tooltip: { callbacks: {
                        label: item => `${item.dataset.label}: ${item.parsed.y}`,
                        afterLabel: item => `Change: ${rows[item.datasetIndex].values[1] - rows[item.datasetIndex].values[0]}`,
                    } } },
            scales: {
                x: { position: 'top', border: { display: false }, grid: { color: '#e2e8f0', drawTicks: false }, ticks: { callback: value => shorten(periods[Number(value)], 16), maxRotation: 0 } },
                y: { display: false, min: domain[0], max: domain[1] },
            },
        },
    };
}

const chart = new Chart(document.getElementById('myChart'), createConfig(chartData));

Preview and code follow the same library selection.

npm install chart.js@4.5.1

<div style="height:320px"><canvas id="myChart"></canvas></div>