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.
Related
I'm trying to move the labels out of the pie chart, but I can't move them in any way, is there any way i angular to move them out of the pie chart? (Angular v14)
I don't quite understand the documentation so it would be great if someone could help me understand how to do this.
Typescript code:
#ViewChild('chart') chart!: ChartComponent;
public chartOptions: Partial<ChartOptions>;
constructor() {
this.chartOptions = {
series: [45, 50, 22],
chart: {
type: 'pie',
width: '270px',
},
labels: ['Team A', 'Team B', 'Team C'],
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 100,
},
},
},
],
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'center',
},
dataLabels: {
offSetY: 50,
// add this part to remove %
enabled: true,
},
};
}
HTML Code:
<div class="chartContainer" style="width: 30%;">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[labels]="chartOptions.labels"
[responsive]="chartOptions.responsive"
[legend]="chartOptions.legend"
[dataLabels]="chartOptions.dataLabels">
</apx-chart>
</div>
I tried to put "offset", "offsetY", etc, inside the datalabel, but they didn't move an inch
You can tweak dataLabels and plotOptions.pie.dataLabels in your chartOptions. I give you a basic example (without Angular for practical reasons...):
let options = {
series: [45, 50, 22],
chart: {
type: 'pie',
height: 350
},
labels: ['Team A', 'Team B', 'Team C'],
dataLabels: {
style: {
colors: ['black']
}
},
plotOptions: {
pie: {
dataLabels: {
offset: 60
}
}
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
I have a bar chart that always shows 4 bars. The bars are coloured dynamically. It looks like the coloured box takes its colour from the first data. I would like to use the colour from the 4th (last) data value. Maybe the options:plugins:legend:label:sort function helps but I don't understand what it does.
options
const options = {
scales: {
x: {
grid: {
display: false,
color: 'rgba(0,0,0)'
}
},
y: {
display: false,
min: 0,
max: 4
},
},
plugins: {
legend: {
position: 'bottom'
}
}
}
So I don't know if I can change the data that the box color comes from, or if there is a config option somewhere where I can change it manually.
You can use the generateLabels function as described here.
Please take a look at below runnable sample code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My Dataset',
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
},
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color
}];
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>
Following up with #uminder's answer, if you want to keep the hide/show chart and the line-through style after clicking on the legend, you can add the following line:
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color,
+ hidden: !chart.isDatasetVisible(0)
}];
}
}
}
}
}
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,
},
},
I am using react-chart-2.
When I hover the line graph, the tooltip is displayed, but I want to hide the tooltip when I hover the line graph.
I also want to hide the numbers 0,0.1,0.2 to 1 on the left (y-axis) of the line graph.
How can I implement this to hide the y-axis of the line graph?
Also, how do I hide the tooltip in the line graph?
code
import React from "react";
import { Bar } from "react-chartjs-2";
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Sales",
type: "line",
data: [51, 300, 40, 49, 60, 37, 40],
fill: false,
borderColor: "#555555",
backgroundColor: "#555555",
pointBorderColor: "#000000",
pointBackgroundColor: "#EC932F",
pointHoverBackgroundColor: "#EC932F",
pointHoverBorderColor: "#EC932F",
yAxisID: "y-axis-1"
},
{
type: "bar",
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: "#F7C520",
borderColor: "#F7C520",
hoverBackgroundColor: "#E6B71E",
hoverBorderColor: "#E6B71E",
yAxisID: "y-axis-1"
}
]
};
const options = {
responsive: true,
tooltips: {
mode: "label"
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: true
}
}
],
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines: {
display: true
}
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
}
}
]
}
};
class MixExample extends React.Component {
render() {
return (
<div>
<h2>Mixed data Example</h2>
<Bar data={data} options={options} />
</div>
);
}
}
export default MixExample;
react-chartjs-2 has 2 major versions relevant to this issue: v2, which has support for chart.js 2.9.4 and below, and v3, which significantly changes a lot of options and configurations, and which supports chart.js 3.0.0 and above.
The original fork of your codesandbox link uses chart.js: 2.9.4 and react-chartjs-2: 2.1.1, which differs from the sandbox link you provided, which uses chart.js: 3.5.1 and react-chartjs-2: 3.0.4. Notably, instead of structuring your options object like
scales: {
x-axes: [ /* array of axis options... */],
y-axes: [ /* array of axis options... */],
}
where each axis has an axisID property, you structure them with the axisID as the key and the rest of the original options object is the value, such as:
scales: {
"x-axis-1": {
display: true,
gridLines: {
display: false
}
},
"y-axis-1": {
type: "linear",
display: false,
position: "left"
}
}
Furthermore, the tooltip can be disabled by moving the tooltip into plugins, as the chart.js docs say that tooltip is a part of plugins:
global options for the chart tooltips is defined in Chart.defaults.plugins.tooltip
Therefore, to disable the tooltip entirely:
plugins: {
tooltip: {
enabled: false
}
}
Since you want to only disable the tooltip for a single dataset, the solutions found here may be of some use, but I haven't tried either for myself. It may also be possible to set the global default for Chart.JS tooltips to false, then enable it on a dataset-by-dataset basis, as displayed here, accessing it via react-chartjs-2's chart ref.
For that level of customization, I would highly suggest starting from the beginning with the most up-to-date version of react-chartjs-2 and the examples therein, rather than your current v2-configured starting point.
I am having a "Donutchart" using highcharts and a selfmade legend for that chart. When i click on an element of the legend, i want to trigger the "mouseOver" or "click" event of that container, so that the chart shows the respective area, belonging to the element of the legend. Basically i want the tooltip to show up.
The Piechart Code:
let chartOptions = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
},
title: {
text: `Title`,
},
plotOptions: {
pie: {
dataLabels: {
enabled: false,
distance: -125,
y: -5,
format: "{y}%",
style: {
fontWeight: "bold",
color: "black",
fontSize: "12px",
},
},
borderWidth: 3,
},
series: {
animation: false,
},
},
tooltip: {
shared: true,
},
series: [
{
type: "pie",
name: "",
tooltip: {
valueDecimals: 2,
valueSuffix: " USD",
},
innerSize: "60%",
data: data_array,
},
],
};
Example button:
<div className='mb_3px mt_3px cursor_pointer color_blue'
onClick={() => {
handleSimulateMouseOver(
item.index
);
}}
>
{truncate(
object[
item.index
].name,
39
)}
</div>
In older posts i found a function called setState('hover'), which i can't bring to work in react, that looks like the following:
let handleSimulateMouseOver= (index) => {
chartOptions.series[0].data[index].setState('hover');
chartOptions.tooltip.refresh(chartOptions.series[0].data[index]);
};
There is an event to trigger callback after legend item click - API: https://api.highcharts.com/highcharts/series.line.events.legendItemClick
Have you tried to use it?