[Chartjs]-ChartJS: single bar of bar chart. I want a border around entire bar, including the max Y-value

by

2👍

✅

You need to define different dataset properties such as borderSkipped, borderRadius, borderWidth to achieve what you’re looking for.

Don’t know why but I also had to define the data of the dataset at the bottom as a floating bar in order to see the rounded border.

data: [[0, 20000]]

Please take a look at the runnable code below and see how it could work.

new Chart('chart', {
  type: 'bar',
  data: {
    labels: [''],
    datasets: [{
        label: "currentAmount",
        data: [[0, 20000]],
        backgroundColor: "#bbb",
        borderColor: "#f00",
        borderWidth: 2,
        borderSkipped: 'top',
        borderRadius: 30,
        barPercentage: 0.5
      },
      {
        label: "amount 1",
        data: [30000],
        backgroundColor: "orange",
        borderColor: "#f00",
        borderWidth: { left: 2, right: 2 },
        barPercentage: 0.5
      },
      {
        label: "amount 2",
        data: [15000],
        backgroundColor: "green",
        borderColor: "#f00",
        borderWidth: { left: 2, right: 2 },
        barPercentage: 0.5
      },
      {
        label: "remaining",
        data: [25000],
        backgroundColor: "#fff",
        borderColor: "#f00",
        borderWidth: 2,
        borderSkipped: 'bottom',
        borderRadius: 30,
        barPercentage: 0.5
      },
    ]
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        displayColors: false
      }
    },
    scales: {
      y: {
        display: false,
        stacked: true,
        beginsAtZero: true
      },
      x: {
        display: false,
        stacked: true
      }
    }
  }
});
canvas {
  max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment