Different border radius

up vote
1
down vote

favorite

I'm using Highcharts JS on an Ionic 3 app, using this npm package.

I wanted to have different border radius on my bar chart, and I found this plugin. I wanted to use this plugin in Ionic with my package, but I don't find a solution to work with it.

Do you have a solution ? I can change the plugin for border radius if needed

edited Nov 11 at 4:53

Erik Philips

39.4k689121

asked Nov 11 at 1:29

Baptiste

86110

add a comment |

up vote
1
down vote

favorite

I'm using Highcharts JS on an Ionic 3 app, using this npm package.

I wanted to have different border radius on my bar chart, and I found this plugin. I wanted to use this plugin in Ionic with my package, but I don't find a solution to work with it.

Do you have a solution ? I can change the plugin for border radius if needed

edited Nov 11 at 4:53

Erik Philips

39.4k689121

asked Nov 11 at 1:29

Baptiste

86110

add a comment |

up vote
1
down vote

favorite

I'm using Highcharts JS on an Ionic 3 app, using this npm package.

I wanted to have different border radius on my bar chart, and I found this plugin. I wanted to use this plugin in Ionic with my package, but I don't find a solution to work with it.

Do you have a solution ? I can change the plugin for border radius if needed

edited Nov 11 at 4:53

Erik Philips

39.4k689121

asked Nov 11 at 1:29

Baptiste

86110

I'm using Highcharts JS on an Ionic 3 app, using this npm package.

I wanted to have different border radius on my bar chart, and I found this plugin. I wanted to use this plugin in Ionic with my package, but I don't find a solution to work with it.

Do you have a solution ? I can change the plugin for border radius if needed

javascript angular ionic-framework highcharts ionic3

edited Nov 11 at 4:53

Erik Philips

39.4k689121

asked Nov 11 at 1:29

Baptiste

86110

edited Nov 11 at 4:53

Erik Philips

39.4k689121

asked Nov 11 at 1:29

Baptiste

86110

edited Nov 11 at 4:53

Erik Philips

39.4k689121

edited Nov 11 at 4:53

Erik Philips

39.4k689121

edited Nov 11 at 4:53

Erik Philips

39.4k689121

asked Nov 11 at 1:29

Baptiste

86110

asked Nov 11 at 1:29

Baptiste

86110

asked Nov 11 at 1:29

Baptiste

86110

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

You need to import the js file in the component and pass Highcharts to it like so:

import * as Highcharts from 'highcharts';

import rounded from '../plugins/rounded-corner.js';

rounded(Highcharts)



plotOptions: {

        series: {

            borderRadiusTopLeft: '50%',

            borderRadiusTopRight: '50%'

        }

    }

Stacblitz demo here: https://stackblitz.com/edit/angular-u1dlv9

edited Nov 11 at 14:23

answered Nov 11 at 4:20

User3250

1,5433825

Does this work for you?
– User3250
Nov 13 at 11:37

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245071%2fdifferent-border-radius%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

You need to import the js file in the component and pass Highcharts to it like so:

import * as Highcharts from 'highcharts';

import rounded from '../plugins/rounded-corner.js';

rounded(Highcharts)



plotOptions: {

        series: {

            borderRadiusTopLeft: '50%',

            borderRadiusTopRight: '50%'

        }

    }

Stacblitz demo here: https://stackblitz.com/edit/angular-u1dlv9

edited Nov 11 at 14:23

answered Nov 11 at 4:20

User3250

1,5433825

Does this work for you?
– User3250
Nov 13 at 11:37

add a comment |

up vote
0
down vote

You need to import the js file in the component and pass Highcharts to it like so:

import * as Highcharts from 'highcharts';

import rounded from '../plugins/rounded-corner.js';

rounded(Highcharts)



plotOptions: {

        series: {

            borderRadiusTopLeft: '50%',

            borderRadiusTopRight: '50%'

        }

    }

Stacblitz demo here: https://stackblitz.com/edit/angular-u1dlv9

edited Nov 11 at 14:23

answered Nov 11 at 4:20

User3250

1,5433825

Does this work for you?
– User3250
Nov 13 at 11:37

add a comment |

up vote
0
down vote

You need to import the js file in the component and pass Highcharts to it like so:

import * as Highcharts from 'highcharts';

import rounded from '../plugins/rounded-corner.js';

rounded(Highcharts)



plotOptions: {

        series: {

            borderRadiusTopLeft: '50%',

            borderRadiusTopRight: '50%'

        }

    }

Stacblitz demo here: https://stackblitz.com/edit/angular-u1dlv9

edited Nov 11 at 14:23

answered Nov 11 at 4:20

User3250

1,5433825

You need to import the js file in the component and pass Highcharts to it like so:

import * as Highcharts from 'highcharts';

import rounded from '../plugins/rounded-corner.js';

rounded(Highcharts)



plotOptions: {

        series: {

            borderRadiusTopLeft: '50%',

            borderRadiusTopRight: '50%'

        }

    }

Stacblitz demo here: https://stackblitz.com/edit/angular-u1dlv9

edited Nov 11 at 14:23

answered Nov 11 at 4:20

User3250

1,5433825

edited Nov 11 at 14:23

answered Nov 11 at 4:20

User3250

1,5433825

answered Nov 11 at 4:20

User3250

1,5433825

answered Nov 11 at 4:20

User3250

1,5433825

Does this work for you?
– User3250
Nov 13 at 11:37

add a comment |

Does this work for you?
– User3250
Nov 13 at 11:37

Does this work for you?
– User3250
Nov 13 at 11:37

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu