Skip to Content (Press Enter)
2022-12-16 12-12-27
Somnath V
106Views
8Comments
Solved
Column Chart with round corners bar lines
Question
Mobile
Beginner
Charts
Application Type
Mobile

How to change column chart bar lines corners 

Now My Chart is look like this image


But, I want it look like this

How to do this?


Rewards,

Somnath

 

0
0
29 Dec 2022
Copy Link
2025-10-18 11-13-53
Ramesh subramanian
Solution

hi Somnath V,

please check this application and Adv. Format..






Thanks,

Ramesh


See solution in context
1
0
29 Dec 2022
Copy Link
2022-08-03 04-32-50
Ravi Punjwani
Solution

Hi Somnath,

You can add custom json configuration in your charting widget via the parameter AdvancedFormat > HighchartsJSON, with the following value:

"plotOptions: {
    series: {
        borderRadiusTopLeft: '20px',
        borderRadiusTopRight: '20px'
    }}"

Here's a sample on jsfiddle https://jsfiddle.net/hgt2bLa7/1/



See solution in context
0
0
29 Dec 2022
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi @Dmitrii Lubenskii ,

the method to specify options is different now, but you can still give them round corners

see also this post

for round corners :

Dorine

See solution in context
0
0
13 Jul 2023
Copy Link
2022-08-03 04-32-50
Ravi Punjwani
Solution

Hi Somnath,

You can add custom json configuration in your charting widget via the parameter AdvancedFormat > HighchartsJSON, with the following value:

"plotOptions: {
    series: {
        borderRadiusTopLeft: '20px',
        borderRadiusTopRight: '20px'
    }}"

Here's a sample on jsfiddle https://jsfiddle.net/hgt2bLa7/1/



0
0
29 Dec 2022
Copy Link
2025-10-18 11-13-53
Ramesh subramanian
Solution

hi Somnath V,

please check this application and Adv. Format..






Thanks,

Ramesh


1
0
29 Dec 2022
Copy Link
2023-07-23 14-37-01
Bad Code Guru

Does not work with Charts version 3

0
0
13 Jul 2023
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi @Dmitrii Lubenskii ,

the method to specify options is different now, but you can still give them round corners

see also this post

for round corners :

Dorine

0
0
13 Jul 2023
Copy Link
2023-07-23 14-37-01
Bad Code Guru

Replying to Dorine Boudry's comment on 13 Jul 2023 16:02:31

Thank you,

but unfortunately it does not work...

I have working json for my chart, but if I provide all the properties to the OS chart, then nothing is applied... No tooltip html support, no custom border radius for specific series, and moreover -- no RTL support.


I have no idea why they overcomplicated the control, when it is much more easier to use the library and build json...

0
0
13 Jul 2023
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP

Replying to Dmitry Lubenskiy's comment on 13 Jul 2023 19:52:59

if you share an oml with what you tried, i'd be happy to have a look

0
0
14 Jul 2023
Copy Link
2024-02-29 05-27-55
Sanju Singh Rathore

I AM ALSO FACING THE SAME ERROR IN MY PROJECT. I THINK THIS IS A BUG IN HIGH CHART OUTSYSTEMS. WHEN I TRIED THIS ON FADDLE.JS IT WORKED.

https://sanju-singh.outsystemscloud.com/OrderManagement/DashboardManager

0
0
30 Jul 2023
Copy Link
2024-02-29 05-27-55
Sanju Singh Rathore

Hi guys 

I found a solution in Json... you can use this code for border-radius and gradient charts.

"plotOptions: {

},

series: [{

            borderRadius: {

                radius: 10

            },

            color: {

                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },

                stops: [

                    [0, 'rgb(0, 0, 255)'],

                    [1, 'rgb(200, 0, 0)']

                ]

            },   

       }]"

Also for border-radius you can use this link

https://jsfiddle.net/highcharts/b288zrch/

0
0
01 Aug 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.