I am trying to remove all the labels from the donut chart in #ant-design/plots.
How to achieve this?
You can achieve this in 2 ways
Setting content property of label object to an empty string.
content:""
label: {
type: "inner",
offset: "-50%",
content: "",
style: {
textAlign: "center",
fontSize: 14,
},
},
Setting fontSize to 0 in the style object.
fontSize:0
label: {
type: "inner",
offset: "-50%",
content: "{value}",
style: {
textAlign: "center",
fontSize: 0,
},
},
Related
Chart.js doughnut text visibility. Tell me how to make it so that when the values intersect, the text comes out and changes its position.
const myChart = new Chart(canvas,
{
type: 'doughnut',
data: {
labels: dataNameDB,
datasets: [{
data: dataCountDB,
backgroundColor: backgroundColor,
borderWidth: 0,
}],
},
plugins: [ChartDataLabels, DoughnutLabel],
options: {
cutout: 340,
responsive: true,
animation: false,
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: (val, ctx) => {
return Math.round((ctx.chart.data.datasets[0].data[ctx.dataIndex] * 100) / summChart()) + "%";
},
display: (val,ctx) =>{
return 'auto';
},
clamp: true,
clip: true,
anchor: 'center',
align: 'center',
offset: 1,
font: {
size: 65,
weight: 'bold',
color: '000000'
},
color: '000000',
labels: {
value: {
color: '#000000'
}
}
},
doughnutlabel: {
labels: [{
text: summChart,
font: {
size: 140,
weight: 'bold',
color: '000000'
}
}]
}
}
}
},
);
Now it outputs something like this, but I need it to be like this:
Although the documentation says that display 'auto' is responsible for this, how to catch it when the text is hidden in order to move it?
In the donut chart in #ant-design/plots,
There is a black border around the individual sections of the donut chart when hovered.
The individual section is translated away from the center when selected.
How to stop/ control these behavior?
const config = {
appendPadding: 10,
data,
angleField: 'value',
colorField: 'type',
radius: 1,
innerRadius: 0.6,
label: {
type: 'inner',
offset: '-50%',
content: '{value}',
style: {
textAlign: 'center',
fontSize: 14,
},
},
interactions: [
{
type: 'element-selected',
},
{
type: 'element-active',
},
],
statistic: {
title: false,
content: {
style: {
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: 'AntV\nG2Plot',
},
},
};
Deal with interactions in config
There is a black border around the individual sections of the donut chart when hovered.
Remove the object type:'element-active'
Note: Removing is conveyed by commenting out in the code below.
interactions: [
...
// {
// type: 'element-active',
// },
]
The individual section is translated away from the center when selected.
Remove the object type: 'element-selected'
Note: Removing is conveyed by commenting out in the code below.
interactions: [
...
// {
// type: 'element-selected',
// },
]
To achieve both you can simply remove the interactions from the config object.
I am trying to remove the tooltip from the donut chart in #ant-design/plots.
I have tried passing tooltip:false to the label object which didn't work.
const config = {
appendPadding: 10,
data,
angleField: 'value',
colorField: 'type',
radius: 1,
innerRadius: 0.6,
label: {
tooltip:false,
type: 'inner',
offset: '-50%',
content: '{value}',
style: {
textAlign: 'center',
fontSize: 14,
},
},
interactions: [
{
type: 'element-selected',
},
{
type: 'element-active',
},
],
statistic: {
title: false,
content: {
style: {
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: 'AntV\nG2Plot',
},
},
};
tooltip:false should be in config object
tooltip is a property under Plot Components in the API
To remove the tooltip you should pass it directly in the config object.
const config = {
tooltip:false,
appendPadding: 10,
data,
angleField: 'value',
colorField: 'type',
radius: 1,
innerRadius: 0.6,
label: {
type: 'inner',
offset: '-50%',
content: '{value}',
style: {
textAlign: 'center',
fontSize: 14,
},
},
interactions: [
{
type: 'element-selected',
},
{
type: 'element-active',
},
],
statistic: {
title: false,
content: {
style: {
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: 'AntV\nG2Plot',
},
},
};
How can I change the x and y co-ordinates of text in react-google-charts?
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
marginRight: 10,
},
},
hAxis: {
textStyle: {
slantedTextAngle: 90
},
}
{
legend: { position: "bottom" },
colors: ["#01B8FF", "#EB6F33", "#03C895"],
chartArea: { width: "40%", height: "70%" },
isStacked: true,
bar: {groupWidth: '30'},
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
},
},
};
This properties can be used to create a horizontal stacked chart.
I am trying to use google react pie chart however I am having a hard time position the title.
Here is my code:
const pieOptions = {
title: 'my awesome chart',
pieHole: 0.6,
slices: [
{
color: '#00a3e0',
},
{
color: '#f2a900',
},
{
color: 'F16A21',
},
{
color: '#e9a227',
},
],
legend: {
position: 'right',
alignment: 'center',
textStyle: {
color: '233238',
fontSize: 14,
},
},
tooltip: {
showColorCode: true,
},
// chartArea: {
// left: 0,
// top: 0,
// width: '100%',
// height: '70%',
// },
fontName: 'Roboto',
fontSize: 20,
}
<Chart
chartType="PieChart"
data={[
['Item', 'Numbers'],
['Item 1', 5000],
['Item 2', 20000],
['Item 3', 6000],
]}
options={pieOptions}
graph_id="PieChart"
width={'100%'}
height={'220px'}
legend_toggle
/>
Here is what I get:
My desired result is to put the title above the legend but I am clueless how to do so.
Here is a link to the npm package I am using:
https://github.com/RakanNimer/react-google-charts#donut-chart
https://github.com/rakannimer/react-google-charts/blob/master/sandboxes/pie-chart/index.js
It doesn't seem that there is a way to position the title. You'll have to set titlePosition: 'none' and create a title separately and style it how you want instead.
Read more at the docs.