Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bellstrand/highcharts-border-radius
https://github.com/bellstrand/highcharts-border-radius
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/bellstrand/highcharts-border-radius
- Owner: bellstrand
- Created: 2017-05-15T13:55:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-12T13:04:15.000Z (11 months ago)
- Last Synced: 2024-11-11T18:58:13.677Z (about 2 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 19
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Highchart Border Radius
[](https://www.npmjs.com/package/highcharts-border-radius)
### Installation
`npm install highcharts-border-radius`
### Usage
The plugin adds options for individual border radius to a highchart column chart.
- borderRadiusTopLeft
- borderRadiusTopRight
- borderRadiusBottomLeft
- borderRadiusBottomRight
### Column Example
```javascript
const borderRadius = require("highcharts-border-radius");
borderRadius(Highcharts);
Highcharts.chart(".container", {
chart: { type: "column" },
title: { text: "Highcharts Border Radius" },
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
},
yAxis: {
min: 0,
title: {
text: "Example",
},
},
plotOptions: {
column: {
borderRadiusTopLeft: 5,
borderRadiusTopRight: 5,
},
},
series: [
{
name: "Series 1",
data: [1, 5, 9, 2, 4, 5, 7, 6],
},
{
name: "Series 2",
data: [8, 4, 6, 7, 1, 5, 4, 8],
},
{
name: "Series 3",
data: [9, 6, 7, 2, 6, 4, 7, 1],
},
],
});
```
### Bar Example
```javascript
const borderRadius = require("highcharts-border-radius");
borderRadius(Highcharts);
Highcharts.chart(".container", {
chart: { type: "bar" },
title: { text: "Highcharts Border Radius" },
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
},
yAxis: {
min: 0,
title: {
text: "Example",
},
},
plotOptions: {
bar: {
borderRadiusTopLeft: 5,
borderRadiusTopRight: 5,
},
},
series: [
{
name: "Series 1",
data: [1, 5, 9, 2, 4, 5, 7, 6],
},
{
name: "Series 2",
data: [8, 4, 6, 7, 1, 5, 4, 8],
},
{
name: "Series 3",
data: [9, 6, 7, 2, 6, 4, 7, 1],
},
],
});
```