Stacked bar chart with rounded corners in React

Question

I have a bar chart using react-chartjs-2 with a bunch of stacked bars, and I want all (incl. the middle ones) have rounded top corners. This is relatively easily done, but the middle ones leave an ugly white gap. What I would like is to fill these gaps with the colour of the next one.

Is this possible? I can't find any option for this (only backgroundColor and borderColor).

This is built from the code:

import React from 'react';
import { Bar } from 'react-chartjs-2';


export const barOptions = {
  responsive: true,
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
    },
  },
  plugins: {
    legend: {
      position: 'top' as const,
    },
  },
  maintainAspectRatio: false,
};

const MyBarExample = () => {

  const [barLabels, setBarLabels] = React.useState<string[]>([]);
  const [dataSet1, setdataSet1] = React.useState<(getDataSet1 | null)[] | null>(null);
  const [dataSet2, setdataSet2] = React.useState<(getDataSet2 | null)[] | null>(null);

  //
  // Get data
  // ...
  

  const barData = {
    labels: barLabels,
    datasets: [
      {
        label: 'Type 1 A',
        data: dataSet1?.map((lng) => lng?.A || '') || [],
        backgroundColor: '#7482FF',
        borderColor: '#7482FF',
        stack: 'Stack 0',
        borderRadius: {
          topLeft: 12,
          topRight: 12,
        },
      },
      {
        label: 'Type 1 B',
        data: dataSet1?.map((lng) => lng?.B || '') || [],
        backgroundColor: 'rgba(116,130,255,0.7)',
        borderColor: 'rgba(116,130,255,0.7)',
        stack: 'Stack 0',
        borderRadius: {
          topLeft: 12,
          topRight: 12,
        },
      },
      {
        label: 'Type 1 C',
        data: dataSet1?.map((lng) => lng?.C || '') || [],
        backgroundColor: 'rgba(116,130,255,0.15)',
        borderColor: 'rgba(116,130,255,0.15)',
        stack: 'Stack 0',
        borderRadius: {
          topLeft: 12,
          topRight: 12,
        },
      },
      {
        label: 'Type 2 A',
        data: dataSet2?.map((lng) => lng?.A || '') || [],
        backgroundColor: '#FF7D45',
        borderColor: '#FF7D45',
        stack: 'Stack 1',
        borderRadius: {
          topLeft: 12,
          topRight: 12,
        },

      },
      {
        label: 'Type 2 B',
        data: dataSet2?.map((lng) => lng?.B || '') || [],
        backgroundColor: 'rgba(255,125,69,0.7)',
        borderColor: 'rgba(255,125,69,0.7)',
        stack: 'Stack 1',
        borderRadius: {
          topLeft: 12,
          topRight: 12,
        },
      },
      {
        label: 'Type 2 C',
        data: dataSet2?.map((lng) => lng?.C || '') || [],
        backgroundColor: 'rgba(255,125,69,0.15)',
        stack: 'Stack 1',
        borderRadius: {
          topLeft: 12,
          topRight: 12,
        },
      },
    ],
  };

  return (
    <Bar width="100%" height="100%" options={barOptions} data={barData} />
  );
};

export default MyBarExample;

smart.cooldev · Answer 1 · 2023-06-17T16:48:24.090

0

I've checked this code and it works fine.

please change barOptions(option) instead of barData(data)

export const barOptions = {
    responsive: true,
    scales: {
        x: {
            stacked: true,
        },
        y: {
            stacked: true,
        },
    },
    plugins: {
        legend: {
            position: 'top'
        },
    },
    elements: {
        bar: {
            borderRadius: 12,
        },
    },
    maintainAspectRatio: false,
};

this is the part of border radius.

    elements: {
        bar: {
            borderRadius: 12
        }
    }

snapshot of result

edited Jun 17 '23 at 16:48

answered Jun 17 '23 at 16:45

smart.cooldev

51
2

So this is a good step along the way, but not entirely what I wanted. I would like the intermediate stacks to also be rounded, not just the top one. You recking that's possible? – Yellow Jun 21 '23 at 09:17

Stacked bar chart with rounded corners in React

1 Answers1