Is there a way to make it so that all the legend options show on a donut apexchart. Currently it's using a scrollbar and I don't want this, I want all the legend options to be visibile in a vertical formation.
Image of the donut chart with a scrollbar legend
Ideally I'd want it to look something like this, but not sure what settings need to be changed.
Ideal donut chart
These are the current options I am using:
const options = {
chart: {
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom',
}
}
}, {
breakpoint: 1200,
options: {
chart: {
height: '150px',
width: '100%',
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
height: '200px',
width: '100%',
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
}
}, {
breakpoint: 992,
options: {
chart: {
height: '250px',
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
}
}],
}
Generally speaking it would be a better approach do use the chart height option, which you mention, to adjust what is visible in the chart area.
If this for whatever reason is not suitable for your use, then you'll need to start overriding the default CSS.
The following should do the trick:
.apexcharts-canvas svg {
/* Allow the legend to overflow the chart area */
overflow: visible;
}
.apexcharts-canvas svg foreignObject {
/* Allow the legend to overflow the legend container */
overflow: visible;
}
Here's a codepen of it working with a donut chart.
These are the default fontSize and height why not trying to decrease the first and increase the second ?
legend: {
fontSize: '14px',
height: undefined,
}
Related
I create some chart in dashboard using react-chart-js.
exmaple
but I have problem now chart not clear. I decided do change chart canvas size move mouse point over the chart . but i can't find solution for that.
i currently use "react-chartjs-2": "3.3.0" and "chart.js": "^3.6.0" packages
i use this option list for draw charts
const options = {
responsive: true,
animation: {
duration: 0,
},
plugins: {
legend: {
fullSize: false,
position: "bottom" as const,
labels: {
display: true,
},
},
title: {
display: true,
color: "white",
font: {
size: 14,
family: "tahoma",
weight: "normal",
style: "italic",
},
text: axis.thresholdValues.sensorName,
},
subtitle: {
display: true,
text: `average: x-axis: ${axis.average.x} y-axis: ${axis.average.y} z-axis: ${axis.average.z}`,
color: "white",
align: "end",
font: {
size: 12,
family: "tahoma",
weight: "normal",
style: "italic",
},
// padding: {
// bottom: 20,
// },
},
zoom: {
pan: {
// pan options and/or events
enabled: true,
speed: 0.01,
},
limits: {
// axis limits
},
zoom: {
// zoom options and/or events
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
speed: 0.01,
},
},
annotation: {
annotations: {
min: {
// type: 'line',
yMin: axis.thresholdValues.min,
yMax: axis.thresholdValues.min,
borderColor: "#D8D8D8",
// borderWidth: 2,
},
max: {
// type: 'line',
yMin: axis.thresholdValues.max,
yMax: axis.thresholdValues.max,
borderColor: "#DB00FF",
// borderWidth: 2,
},
},
},
tooltip: {
mode: "index",
intersect: false,
},
},
spanGaps: true,
datasets: {
line: {
pointRadius: 0, // disable for all `'line'` datasets
},
},
elements: {
point: {
radius: 0, // default to disabled in all datasets
},
},
transitions: {
zoom: {
animation: {
duration: 0,
},
},
},
scales: {
x: {
title: { display: true, text: "Time", align: "end" },
type: "time",
},
y: {
title: { display: true, text: "second", align: "top" },
},
},
events: ["click"],
hover: {
mode: "nearest",
intersect: false,
},
};
<Line data = {data} option = {option} />
Any one can suggest solution for it.
How to correctly display large amount of data on ReactApexChart , Bar Chart. At image below, I am passing 552 entries. When amount of entries under 50 everything displays just fine, above this number starts look like a hell and performance is getting low. I am using React Js Class Component.
this.state = {
series: [{
name: props.name,
data: props.chartValue,
}, ],
options: {
grid: {
row: {
colors: ["#D6EAF8 ", "#D6EAF8"],
},
},
chart: {
type: "bar",
height: 350,
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
colors: {
ranges: [{
from: 0,
to: Number.MAX_VALUE,
color: "#29ABE2",
}, ],
backgroundBarColors: [],
backgroundBarOpacity: 1,
backgroundBarRadius: 0,
},
},
},
dataLabels: {
enabled: true,
formatter: function(val) {
return val + ` min`;
},
offsetX: 15,
style: {
fontSize: "12px",
colors: ["#FFFFFF"],
},
},
xaxis: {
categories: props.ids,
labels: {
style: {
colors: [],
fontSize: "15px",
fontWeight: 500,
},
},
},
yaxis: {
categories: props.differenceInTime,
labels: {
style: {
colors: [],
fontSize: "15px",
fontWeight: 500,
},
},
axisTicks: {
show: true,
borderType: "solid",
color: "#78909C",
width: 10,
offsetX: 0,
offsetY: 0,
},
},
},
};
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" />
</div>
Here is 552 entries
why put max integer for the colors? That could be a performance issue
ranges: [{
from: 0,
to: Number.MAX_VALUE,
color: "#29ABE2",
}
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?
I have the following bar chart configuration.
const series = [
{
name: 'Net Profit',
data: [18, 34, 55, 57, 80, 70],
},
];
const options = {
chart: {
type: 'bar',
height: '50px',
toolbar: {
show: false,
},
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
},
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: false,
},
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '80%',
barHeight: '100%',
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: false,
width: 0,
colors: ['transparent'],
},
fill: {
opacity: 1,
colors: [
'#000000',
'#B32824',
'#1A73E8',
'#B32824',
'#1A73E8',
'#B32824',
],
type: 'solid',
},
tooltip: {
enabled: false,
},
xaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
};
I am getting extra padding at the bottom as below. how can I remove that?
If you don't want to show x-axis and y-axis in your chart, you can simply do
const options = {
chart: {
type: 'bar',
height: '250px',
sparkline: {
enabled: true
}
},
}
The sparkline option will remove all paddings/margins around the chart.
I was facing the same issue, and after reading the doc I found that you should set the value of parentHeightOffset as 0, something like this
var opt1 = {
chart: {
type: 'line',
height: 200,
...
parentHeightOffset: 0,
...
},
...
};
I'm trying to apply some basic style into my tooltip using ApexCharts in React.
This is my configuration:
const options = {
chart: {
foreColor: "#ffffff12",
toolbar: {
show: false
}
},
colors: ["white"],
stroke: {
width: 3
},
grid: {
borderColor: "#ffffff12",
borderWidth: 1,
clipMarkers: false,
yaxis: {
lines: {
show: false
}
},
xaxis: {
lines: {
show: true,
},
}
},
dataLabels: {
enabled: false
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.4,
opacityTo: 0
}
},
markers: {
size: 0
},
tooltip: {
enabled: true,
style: {
fontSize: '20px',
fontFamily: 'Roboto'
},
x: {
show: true,
format:'HH:mm'
},
y: {
formatter:(value) => `${value}$`
},
marker: {
show: false,
},
theme:'dark'
},
...
I'm able to see it with the dark default values (like dark background and white font color etc...), but I'm not able to make it work with my own.
Thanks in advance!
Please add id property to parent of chart element like this.
#chartContainer .apexcharts-tooltip {
color: #000000;
}
#chartContainer .apexcharts-tooltip .apexcharts-tooltip-series-group.active {
background: #ffffff !important;
}
The tooltip in ApexCharts can be targetted directly through CSS as it is just an HTML element.
Change the tooltip style by overriding .apexcharts-tooltip class and any inner elements inside it.
.apexcharts-tooltip.light{
background:red;
color:green;
}