Line fill borderradius in Chart.js

Question

Is there a way to add a borderradius to the fill background on a line chart in Chart.js?

An example of what I want to achieve: Line fill with borderradius

I've used fill: 'start' on the dataset and the background gets set. The only thing missing is the borderradius.

Edit: Added current progress

const ctx = document.getElementById('LineFill').getContext('2d');
const data = {
  labels: ['2020', '2021', '2022', '2023'],
  datasets: [
        {
            label: 'Dataset 1',
            data: [1,3,5,7],
            backgroundColor: 'transparent',
            borderDash: [10, 5],
            borderColor: '#1189D0',
        },
        {
            label: 'Dataset 2',
            data: [1,2,3],
            borderColor: '#001946',
            backgroundColor: '#001946',
            fill: 'start',
            tension: 0.9,
            borderRadius: 5,
        },
    ],
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: false
      },
    },
    scales: {
      x: {
        stacked: false,
        ticks: {
          display: true
        },
      },
      y: {
        stacked: false,
        beginAtZero: true,
      }
    }
  }
};

new Chart(ctx, config);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="LineFill">

Answer 1

There is no option to set a borderRadius-like property for chart.js's filler. And, in general, unlike with CSS, it is non-trivial to set a border radius for a figure (that is not a rectangle) drawn using the Canvas API.

Since a plugin in chart.js can draw on the canvas and also interrogate the positions of the data points on the plot, one can set up such a plugin that fills a region corresponding to the standard fill of a line dataset with rounded corners.

However, such a figure is not compatible with the rest of the line drawing, since the points should remain at their (corner) positions, and the line will start and end at those points; so the points and line for the dataset that is filled-rounded should be made invisible.

Here's a simplified version of such a plugin:

// from chart.js/chunks/helpers.dataset.js
function _bezierInterpolation(p1, p2, t) {
    const _pointInLine = (p1, p2, t) => ({
        x: p1.x + t * (p2.x - p1.x),
        y: p1.y + t * (p2.y - p1.y)
    });

    const cp1 = {
        x: p1.cp2x,
        y: p1.cp2y
    };
    const cp2 = {
        x: p2.cp1x,
        y: p2.cp1y
    };
    const a = _pointInLine(p1, cp1, t);
    const b = _pointInLine(cp1, cp2, t);
    const c = _pointInLine(cp2, p2, t);
    const d = _pointInLine(a, b, t);
    const e = _pointInLine(b, c, t);
    return _pointInLine(d, e, t);
}

const pluginRoundedCornersFill = {
    id: 'pluginRoundedCornersFill',
    afterDatasetDraw(chart, {meta}, options) {
        let indexFound = false, R, fillColor;
        for(const datasetOptions of options?.datasets ?? []){
            if(datasetOptions.index === meta.index){
                indexFound = true;
                R = datasetOptions.radius ?? 5;
                fillColor = datasetOptions.fillColor ?? 'rgba(0, 0, 0, 0.1)';
                break;
            }
        }
        if(indexFound){
            const points = meta.data;
            const ctx = meta.controller._ctx;
            ctx.save();
            ctx.fillStyle = fillColor;
            ctx.beginPath();
            const nPoints = points.length;
            const factFirst = R / Math.hypot(points[0].x-points[1].x, points[0].y-points[1].y);
            const factLast = R / Math.hypot(points[nPoints-1].x-points[nPoints-2].x, points[nPoints-1].y-points[nPoints-2].y);
            const pFirst = _bezierInterpolation(points[0], points[1], factFirst);
            const pLast = _bezierInterpolation(points[nPoints-2], points[nPoints-1], 1-factLast);
            const pointsMod = [...points];
            pointsMod[0] = {...points[0]};
            pointsMod[0].x  = pFirst.x;
            pointsMod[0].y  = pFirst.y;
            pointsMod[nPoints-1] = {...points[nPoints-1]};
            pointsMod[nPoints-1].x  = pLast.x;
            pointsMod[nPoints-1].y  = pLast.y;
            ctx.moveTo(pointsMod[0].x, pointsMod[0].y);
            for(let i = 0; i < nPoints - 1; i++){
                const previous = pointsMod[i], target = pointsMod[i + 1];
                ctx.bezierCurveTo(previous.cp2x, previous.cp2y,
                    target.cp1x, target.cp1y, target.x, target.y);
            }
            ctx.arcTo(points[nPoints-1].x, points[nPoints-1].y, points[nPoints-1].x, points[nPoints-1].y + R, R);
            const y0 = meta.iScale.top;
            ctx.lineTo(points[nPoints-1].x, y0 - R);
            ctx.arcTo(points[nPoints-1].x, y0, points[nPoints-1].x - R, y0, R);
            ctx.lineTo(points[0].x + R, y0);
            ctx.arcTo(points[0].x, y0, points[0].x, y0 - R, R);
            ctx.lineTo(points[0].x, points[0].y + R);
            ctx.arcTo(points[0].x, points[0].y, pointsMod[0].x, pointsMod[0].y, R);
            ctx.lineTo(pointsMod[0].x, pointsMod[0].y);
            ctx.fill();
            ctx.restore();
        }
    }
}

const data = {
    labels: ['2020', '2021', '2022', '2023'],
    datasets: [
        {
            label: 'Dataset 1',
            data: [2, 3, 5, 7],
            backgroundColor: 'transparent',
            borderDash: [10, 5],
            borderColor: '#1189D0',
        },
        {
            label: 'Dataset 2',
            data: [1, 2, 3],
            borderWidth: 0,
            pointRadius: 0,
            pointHitRadius: 0,
            //backgroundColor: '#00d0f6',
            //fill: 'start',
            tension: 0.4, // for line-interior angles
        },
    ],
};

const config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        tension: 0.3,
        animation: false,
        plugins: {
            legend: {
                display: false
            },
            pluginRoundedCornersFill: {
                datasets: [
                    {
                        index: 1,
                        fillColor: '#1189D077',
                        radius: 10
                    }
                ]
            }
        },
        scales: {
            x: {
                stacked: false,
                ticks: {
                    display: true
                },
            },
            y: {
                stacked: false,
                beginAtZero: true,
            }
        }
    },
    plugins: [pluginRoundedCornersFill]
};

new Chart('LineFill', config);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="LineFill"></canvas>