Skip to content

bellstrand/highcharts-border-radius

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Nov 23, 2020
8109c41 · Nov 23, 2020

History

11 Commits
Nov 23, 2020
May 15, 2017
May 15, 2017
Nov 23, 2020
Nov 23, 2020
Nov 23, 2020

Repository files navigation

Highchart Border Radius

npm Version

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

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

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],
    },
  ],
});