Question 271196 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to increase width of separator line in ant Charts?

enter image description here

These white lines i need to increase its width i tried multiple things but nothing worked

using <Pie {…props} />;

with Config = {
height: 246.01,
width: 150,
data: data
angleField: ‘value’,
colorField: ‘type’,
color: colorArry,
style: {
fill: ‘red’,
fillOpacity: 0.5,
stroke: ‘black’,
lineWidth: 11,
lineDash: [4, 5],
strokeOpacity: 12,
shadowColor: ‘black’,
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5,
cursor: ‘pointer’,
},
radius: 0.9,
label: {
type: ‘inner’,
offset: ‘0’,
rotate: ‘0’,
autoRotate: false,
content: data[‘type’],
position: ‘start’,
style: {
fontSize: 16,
textAlign: ‘center’,
fontWeight: 500,
},
},

interactions: [{ type: 'element-active' }],
legend: { position: 'left-bottom' },

};

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    While researching and going through DOCS I have found this solution and it is working perfectly fine

    pieStyle: { lineWidth: 5, },


  2. 0

    you can try this

     const customTheme = {
 // Define your custom theme settings
       defaultColor: 'blue',
       appendPadding: [20, 10, 5, 15], // Adjust the padding as needed
       separator: {
       line: {
       style: {
        lineWidth: 2, // Adjust the separator line width here
             },
            },
          },
        };    

 <Chart
    data={chartData}
    scale={chartConfig}
    theme={customTheme} // Set the custom theme here
  >
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search