Chart 3.0.0-beta.7: bar borderRadius - bottomRight & bottomLeft ??

Expected Behavior

Am I doing something wrong or is it not possible? The topLeft and topRight settings work perfectly. How can I use pointStyle on a barchart?

Example:

Current Behavior

The bottomLeft and bottomRight do not work for me --> borderSkipped: false

Possible Solution

???

Steps to Reproduce

see: https://jsfiddle.net/zibous/57Lwhcdx/

Context

var data = {
  labels: ['Current', 'Today', 'Month', 'Year'],
  datasets: [{
      label: 'Water Consumtion 2020',
      backgroundColor: ['#2980b9', '#2980b9', '#2980b9', '#2980b9'],
      borderWidth: 0,
      data: [15, 150, 1500, 6000],
      unit: 'liter',
      borderRadius: {
        // topLeft: 100,
        // topRight: 100,
        bottomRight: 100,   <--- Do not work
        bottomLeft: 100,      <--- Do not work
      }
    },
    {
      borderWidth: 0,
      tooltip: false,
      data: [9985, 9850, 8500, 4000],
      showLine: false,
      pointRadius: 8,
      pointStyle: ['▲', '▼', '≃', '▲']    <---  possible or workaround ???
    }
  ]

};
var options = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        stacked: true,
        ticks: {
          major: {
            enabled: true,
          },
        },
      },
      y: {
        stacked: true,
        ticks: {
          major: {
            enabled: true,
          },
        },
      }
    },
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: 'Consumption of water 2020'
      },
      tooltip: {
        callbacks: {
          label: (chart) => {
            if (chart.dataset.tooltip === false) {
              return null;
            }
            return chart.formattedValue + " " + chart.dataset.unit || "";
          }
        }
      },
    },
  }
};

window.onload = function() {
  // global
  Chart.defaults.responsive = true;
  Chart.defaults.maintainAspectRatio = false;
  Chart.defaults.animation = false;
  Chart.defaults.locale = "de-AT";
  // default font and -color
  Chart.defaults.font.family = "Roboto, Quicksand,'Open Sans','Rubik','Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
  Chart.defaults.color = '#FFFFFF';
  Chart.defaults.font.size = 14;
  // title settings
  Chart.defaults.plugins.title.font.size = 20
  Chart.defaults.plugins.title.font.style = "normal";
  // gridlines
  Chart.defaults.scale.gridLines.display = false
  Chart.defaults.scale.display = false;
  // tooltips
  Chart.defaults.plugins.tooltip.enabled = true;
  Chart.defaults.plugins.tooltip.backgroundColor = "#ecf0f1";
  Chart.defaults.plugins.tooltip.titleColor = "#2c3e50"
  Chart.defaults.plugins.tooltip.bodyColor = "#607D8B"
  Chart.defaults.plugins.tooltip.footerColor = "#34495e"
  // create the chart
  var ctx = document.getElementById('mybar').getContext('2d');
  window.myBar = new Chart(ctx, options);
};

Environment

• Chart.js version: Chart 3.0.0-beta.7
• Browser name and version: any

[LeeLenaleee]

A barchart doesnt use the point element, if you want to use it you have to create you’re own chart https://www.chartjs.org/docs/master/developers/charts

[zibous]

@danmana Thanks.