question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

borderRadius is not working properly with type "Bar with Negative Values"

See original GitHub issue

Description

If you follow this exemple and you try to add a border raduis, it won’t work properly. The border radius is only applied to the left bars and not to the right bars.

My code :

  var options = {
    series: [
      {
        name: 'Males',
        data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5,
          3.9, 3.5, 3
        ]
      },
      {
        name: 'Females',
        data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4,
          -4.1, -4, -4.1, -3.4, -3.1, -2.8
        ]
      }
    ],
    chart: {
      type: 'bar',
      height: 440,
      stacked: true
    },
    colors: ['#008FFB', '#FF4560'],
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '80%',
        borderRadius: 5   // Here is the issue ...
      },
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      width: 1,
      colors: ["#fff"]
    },
    grid: {
      xaxis: {
        lines: {
          show: false
        }
      }
    },
    yaxis: {
      min: -5,
      max: 5,
    },
    xaxis: {
      categories: ['85+', '80-84', '75-79', '70-74', '65-69', '60-64', '55-59', '50-54',
        '45-49', '40-44', '35-39', '30-34', '25-29', '20-24', '15-19', '10-14', '5-9',
        '0-4'
      ],
      title: {
        text: 'Percent'
      },
      labels: {
        formatter: function (val) {
          return Math.abs(Math.round(val)) + "%"
        }
      }
    },
  };

  var chart = new ApexCharts(document.querySelector("#chart"), options);
  chart.render();

Steps to Reproduce

  1. Try the code below

Expected Behavior

All bars have rounded corners.

Actual Behavior

Only one side of the chart has bars with rounded corners.

Reproduction Link

https://codepen.io/plapointe6/pen/QWgEKwJ

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
brianlagunascommented, Sep 13, 2021

@plapointe6 Your idea worked perfectly and actually ended up being a new feature. You can now assign a border radius to a specific series in your chart. See PR #2614

0reactions
brianlagunascommented, Sep 13, 2021

@plapointe6 that’s a really good idea. Let me play around a bit and see how that works out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Negative Border Radius in CSS? - Stack Overflow
Here's yet another way of doing it, this time using a radial background image. This lets it be transparent and works in both...
Read more >
border-radius - CSS: Cascading Style Sheets - MDN Web Docs
Negative values are invalid. Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage  ......
Read more >
plotOptions.bar.borderRadius | highcharts API Reference
In bar type series it applies to the bars unless a color is specified per point. The default value is pulled from the...
Read more >
CSS Box Shadow - CSS-Tricks
Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box....
Read more >
How To Style HTML Elements with Borders, Shadows, and ...
Second is that this will not work correctly with a percent-based value. Percent-based values on a border-radius property curve a percent of ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found