javascript - Rounded Charts using ApexCharts - Stack Overflow

admin管理员组

文章数量:1287606

I saw this post on GitHub about rounded bar charts (.js/issues/422) and was wondering how to round the bottom of the chart I am using version 3.27.3. I want my charts to look like this: Sausage Chart And at the moment they look like this Bar Chart As you can see the bottom part is not rounded

These are my options:

    chart: {
      background: "transparent",
      foreColor: "#333",
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: false,
      },
    },
    legend: {
      show: false,
    },
    grid: {
      show: false,
    },
    xaxis: {
      categories: [],
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
      labels: {
        show: false,
      },
    },
    yaxis: {
      labels: {
        style: {
          colors: ["#FFFFFF"],
          fontSize: "12px",
          fontFamily: "Helvetica, Arial, sans-serif",
          fontWeight: 500,
          cssClass: "apexcharts-yaxis-label",
        },
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        borderRadius: 7,
        columnWidth: "25%",
        barHeight: "70%",
      },
    },
    fill: {
      colors: ["#FFFFFF"],
    },
    dataLabels: {
      enabled: false,
    },
    title: {
      text: undefined,
    },
  });

I saw this post on GitHub about rounded bar charts (https://github./apexcharts/apexcharts.js/issues/422) and was wondering how to round the bottom of the chart I am using version 3.27.3. I want my charts to look like this: Sausage Chart And at the moment they look like this Bar Chart As you can see the bottom part is not rounded

These are my options:

    chart: {
      background: "transparent",
      foreColor: "#333",
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: false,
      },
    },
    legend: {
      show: false,
    },
    grid: {
      show: false,
    },
    xaxis: {
      categories: [],
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
      labels: {
        show: false,
      },
    },
    yaxis: {
      labels: {
        style: {
          colors: ["#FFFFFF"],
          fontSize: "12px",
          fontFamily: "Helvetica, Arial, sans-serif",
          fontWeight: 500,
          cssClass: "apexcharts-yaxis-label",
        },
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        borderRadius: 7,
        columnWidth: "25%",
        barHeight: "70%",
      },
    },
    fill: {
      colors: ["#FFFFFF"],
    },
    dataLabels: {
      enabled: false,
    },
    title: {
      text: undefined,
    },
  });

• javascript
• charts
• apexcharts

Share Improve this question Follow asked Jul 27, 2021 at 11:45 Radu LupascuRadu Lupascu 9111 silver badge33 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You need to add the property borderRadius: 30 (or number that you want) inside of the options properties

options: {
 plotOptions: {
  bar: {
   borderRadius: 30,
   // borderRadiusApplication: 'end',
   // borderRadiusWhenStacked: 'last',
  }
 }
}

You can also play using borderRadiusApplication and borderRadiusWhenStacked all those properties can be used from version 3.26 and above

you can find more info here https://apexcharts./docs/options/plotoptions/bar/

本文标签： javascriptRounded Charts using ApexChartsStack Overflow