highcharts / rounded-corners

Rounded corners

Deprecated

This plugin has been deprecated. Since Highcharts v11, rounded corners are built into the library natively, and with better handling of chart direction, stacking and more. See column.borderRadius.

Description

This plugin adds options for setting rounded corners on bar and column charts.

The contents of the plugin is located in the javascript file rounded-corners.js.

This plugin is published under the MIT license, and the license document is included in the repository.

Usage

The plugin adds four options to the column series object; borderRadiusTopLeft, borderRadiusTopRight, borderRadiusBottomLeft and borderRadiusBottomRight. If the options are given as numbers, they are interpreted as pixels. If given as percentage strings, they are percentages of the column width.

Demo

• Rounded corners

rounded-corners's Issues

Bar chart

In case when we use inverted column chart or bar, then datalabels disappears.

http://jsfiddle.net/2TuCW/36/

Errors with drilldown

The plugin probably needs to define its own animateFrom and animateTo methods to be picked up by the drilldown module.

Live demo with steps to reproduce

Demo:

• http://jsfiddle.net/z9nstbz8/

Click on a column and observe errors in the console.

Affected browser(s)

All

Workaround
Merge new series with the current point series options.

Example:

• http://jsfiddle.net/2Lpotqvs/

Strange shape on the edge

If the first or last section is too small, either no rounded corners is
shown (like the bar's right part) or there's a weird visual (like the bar's
left part).

Example:

• http://jsfiddle.net/v27Lnc4t/2/

Rounded corners for stack bar chart

Our requirement is apply rounded corners for bar chart. It is not working for stack bar chart if one of the series data value is zero (series values will change dynamically).

I have added example in this link.
https://jsfiddle.net/vasagi/dytqw4bu/3/

Installing this library into a vue.js app

Hii,
I am creating a vue application, where I want to install this library. Is there any suggestions on how to implement it?

Thanks in advance

Changing react state with rounded corners forces chart to disappear

Reproduction online.

Steps to reproduce: click on the button to change React state.
https://codesandbox.io/s/confident-bird-440fr?file=/src/Chart.js

Notice that when we remove rounded corners this behaviour doesn't take place.

import "./styles.css";
import * as React from "react";
import Chart from "./Chart";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      test: true
    };
  }

  handleClick() {
    this.setState({ test: false });
  }

  render() {
    return (
      <div className="test">
        <Chart />
        <button onClick={() => this.handleClick()}>Click here</button>
      </div>
    );
  }
}

export { App };

import "./styles.css";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import borderRadius from "./rounded-corners.js";

export default function Chart() {
  borderRadius(Highcharts);

  const options = {
    chart: {
      type: "column"
    },
    colors: ["blue"],
    xAxis: {
      categories: [
        "1 Jan 2021",
        "2 Jan 2021",
        "3 Jan 2021",
        "4 Jan 2021",
        "5 Jan 2021",
        "6 Jan 2021",
        "7 Jan 2021",
        "8 Jan 2021",
        "9 Jan 2021",
        "10 Jan 2021",
        "11 Jan 2021",
        "12 Jan 2021"
      ]
    },
    series: [
      {
        name: "Tokyo",
        animation: false,
        type: "column",
        data: [
          49.9,
          71.5,
          106.4,
          129.2,
          144.0,
          176.0,
          135.6,
          148.5,
          216.4,
          194.1,
          95.6,
          54.4
        ]
      }
    ],
    plotOptions: {
      column: {
        borderRadiusTopLeft: 15,
        borderRadiusTopRight: 15
      }
    }
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
}

Rounded corners stop animations

If you try to animate a graph with rounded corners the animations don't work, the graph just jumps to the next set of values. If you set the borderRadius to 0% they suddenly start working again. I'm not sure how to fix this (any advice would be helpful, I might be able to help) but I can at least reproduce it: http://jsfiddle.net/s6x1gy0e/

Stacked Bar - last series shorter than rounded corner px,

EXAMPLE:

I have created a stacked bar chart where each "point" within the bar is a separate series. I am using rounded-corners to round both outer sides of the bar. The issue only exists if the first or last series is a value that causes that part of the series to be rendered with a width shorter than the width for the border rounding. Within the screenshot above the value for the last series is 5 while the corner rounding is 30.

Bar is cropped

Let's compare two edges (left and right). The left seems to be cropped by 1px.

Example:

• http://jsfiddle.net/gfykhnuy/

Cannot install with yarn

yarn add highcharts-rounded-corners
yarn add v1.3.2
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/Highcharts: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/xxx/yyy/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

I think this is due to the incorrect capitalisation of the highcharts dependency (it's Highcharts in the package.json).

I'll submit a PR to fix this.

Artefacts when radius is too big

In the case when topRadiusLeft is higher then half of column width then shape is wrong.

The solution:

Add conditions in line #33

if (rTopLeft > (w / 2)) {
	rTopLeft = w / 2;
}

if (rTopRight > (w / 2)) {
	rTopRight = w / 2;
}

JS Error

Hi Folks, I'm getting the following error while using this plugin with Highcharts 4.1.10 and/or Highstock 2.1.10.

TypeError: rel is not a function

Any idea/suggestion to fix this issue. Thanks.

Installing this library in an Angular app

Hello, I am using the angular2-highcharts package in my angular project and I need to install this library in there, any ideas how?

Typescript error without the .d.ts definition

When trying to use it under TypeScript environment is throwing these errors.

Could not find a declaration file for module 'highcharts-rounded-corners'. '/home/projects/blah/node_modules/highcharts-rounded-corners/rounded-corners.js' implicitly has an 'any' type.
Try npm i --save-dev @types/highcharts-rounded-corners if it exists or add a new declaration (.d.ts) file containing declare module 'highcharts-rounded-corners';ts(7016)

usage with the react package?

any easy way of integrating it?

Upload to bower

please

Not able to style target in bullet chart to have a Rounded Corner even while using the plugin

Description of the issue

Target bar should have a rounded edge. May be add a borderRadius or make it able to use the rounded corner plugin.

Live demo with steps to reproduce

https://jsfiddle.net/chandanasri/zwrqspej/2/

the color of the stack have a bug

when i click "series 1",the color never turn back to the page load color

Negative values dont work as expected

Expected behavior is:

Top Left / Top Right are set on a vertical column and it has negative value then the corners should be opposite so Bottom Left / Bottom Right.

I've made changes to ours to fix this, but it only covers our use cases (vertical columns only):

            if(point.y < 0){
                var tmpTopLeft = rTopLeft,
                    tmpTopRight = rTopRight,
                    tmpBottomLeft = rBottomLeft,
                    tmpBottomRight = rBottomRight;

                rTopLeft = tmpBottomLeft;
                rTopRight = tmpBottomRight;
                rBottomLeft = tmpTopLeft;
                rBottomRight = tmpTopRight;
            } 

I considered forking for this fix but it only works on vertical columns and may cause problems on horizontal columns.

npm installation issue.

Hi! Thank you for this useful pacakge :)

When I'm trying to install a package via npm (npm i highcharts-rounded-corners), there is 404 code for Highcharts dependency:

npm ERR! code E404
npm ERR! 404 Not Found: Highcharts@>=3.0.0

So, is there anything I can do to install this package?

Rounded corners on stacked bar chart

Any chance to see this working on stacked bar charts? Currently the rounded corners are applied to the bottom bar as well. There should be a rule to apply the rounded corners only for the top bar if there are more that 1 bar on top of each other.

Example in the docs?

If this is a project that's still considered a valid way to try to achieve rounded corners on only some corners, and using the npm package works, could there be a use example in the docs using npm?

As is, I'm not sure where to go after just importing the package...

                        <HighchartsReact
                            containerProps={{ className: 'highcharts__chart' }}
                            highcharts={RoundedCorners(highcharts)}
                            options={chartOptions}
                            ref={chartComponentRef}
                        />

does not seem to work. (Unless it's not compatible with highcharts-react?)

How do you change the borderRadius of each category within a highcharts column chart

borderRadius work but borderRadiusTopLeft: 10, borderRadiusTopLeft: 5, borderRadiusTopRight: 5, borderRadiusBottomRight: 10, borderRadiusBottomLeft: 10 not work

http://jsfiddle.net/2TuCW/203/

Feature request: Add Sankey Chart rounded corners

Would love to see this feature to work with sankey charts. Similar to this version

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/sankey-outgoing

But not arrowed shaped, rather rounded ends.

Pie chart

How can i add a rounded corner to a pie chart like:

• http://jsfiddle.net/pDdcd/

Is possible with the latest version of HighCharts?

Updating rounded corner radius doesn't work

Is there a way to update the radius of rounded corners? My problem is that if I have two stacked columns, and one of them goes to 0, I need to animate the other column to have a rounded top.

I have tried:

    myChart.series[0].setOptions({
        borderRadiusBottomLeft: '40%',
        borderRadiusBottomRight: '40%',
        borderRadiusTopLeft: '40%',
        borderRadiusTopRight: '40%'
    });

and I have tried:

    myChart.series[0].borderRadiusBottomLeft = '40%';

But neither seem to work, any suggestions @KacperMadej?

Release latest version via npm

Would it please be possible to release the latest version containing the fix contained in commit 001c54d via npm?

Currently in order to use it we need to reference it via 'git+...'.
Many thanks !

Rounded corners disappear upon 100% being reached

Hi all,
Not sure if it's a plug-in issue or a user error. When my bar chart is 100% full, the right/full end rounded corners disappear. See below:

Thanks in advance for any thoughts.

Rounded corners for stack bar chart

Our requirement is apply rounded corners for bar chart. It is not working for stack bar chart if one of the series data value is zero (series values will change dynamically).

I have added example in this link.
https://jsfiddle.net/vasagi/dytqw4bu/3/

How to add rounded corner in Bar with negative stack

I want to achive following graph