PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, November 29, 2022

[FIXED] How to make apex chart react pie bar thicker

 November 29, 2022     apexcharts, donut-chart, pie-chart, reactjs     No comments   

Issue

How do i make the bar thicker?

import React from "react";
import Chart from "react-apexcharts";

 const series = [44, 55, 41, 17, 15];
 const options = {
 chart: {
 type: "donut"
 }
 };

 export default function PieChart() {
 return (
  <div>
  <Chart options={options} series={series} type="donut" height={300} />
  </div>
 );
 }

*sandbox sample here https://codesandbox.io/s/vigilant-pateu-tv4t5q?file=/src/App.tsx *


Solution

use plotOptions -> pie -> donut --> size to increase or decrease the donut size. Increasing the donut size would decrease the bar width & vice versa. Updated codesandbox

const options = {
  chart: {
    type: "donut"
  },
  plotOptions: {
    pie: {
      donut: {
        size: "25%"
      }
    }
  }
};


Answered By - A G
Answer Checked By - Timothy Miller (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing