I am trying to show semi donut chart using Apexcharts. I want it to be responsive so I've set its height and width to auto, but it is still taking so much of extra space after donut and it's effecting my whole dashboard. Any idea how to remove this extra space?
Here's my current chart configuration.
const options: ApexOptions = {
chart: {
type: "donut",
height: "auto",
width: "auto",
parentHeightOffset: 0,
sparkline: {
enabled: true,
},
redrawOnWindowResize: true,
redrawOnParentResize: true,
events: {
mounted: chart => {
chart.windowResizeHandler()
},
},
},
stroke: {
width: 0,
},
labels: labels,
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
donut: {
size: "65%",
background: "transparent",
labels: {
show: true,
name: {
show: false,
},
},
},
},
},
grid: {
padding: {
left: 0,
right: 0,
bottom: 0,
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
}
return (
<div className="chart" style={{ height: "auto", width: "auto" }}>
<ReactApexChart options={options} series={series} type="donut" />
</div> )
I think, specifying the height and width in the parent container will help you in your case
like this.
<div className="chart" style={{ height: "50px", width: "50px" }}>
<ReactApexChart options={options} series={series} type="donut" height="100%" width="100%" />
</div>
and remove height and width form you chart Options
chart: {
type: "donut",
parentHeightOffset: 0,
sparkline: {
enabled: true,
},
...
}
Related
I have an apexchart in Vue 3 with the following configuration;
chart: {
fontFamily: "inherit",
stacked: true,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
stacked: true,
horizontal: true,
endingShape: "rounded",
columnWidth: ["24%"],
barHeight: "80%"
}
},
legend: {
position: "top",
horizontalAlign: "right",
offsetX: -10
},
dataLabels: {
enabled: true,
style: {
fontSize: "12px",
fontWeight: 500
}
},
stroke: {
curve: "smooth",
show: true,
width: 1,
colors: ["transparent"]
},
xaxis: {
categories: [] as Array<string>,
axisBorder: {
show: false
},
axisTicks: {
show: true
},
labels: {
style: {
colors: labelColor,
fontSize: "12px"
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: "12px"
},
maxWidth: "100px"
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: "none",
value: 0
}
},
hover: {
filter: {
type: "none",
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: "none",
value: 0
}
}
},
tooltip: {
followCursor: true,
shared: true,
intersect: false,
style: {
fontSize: "12px"
},
x: {
formatter: function (val) {
return val;
}
},
y: {
formatter: function (val) {
return val;
}
}
},
colors: [baseColor, secondaryColor, baseLightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
}
Apexchart declaration;
<apexchart
type="bar"
:options="options"
:series="[]"
ref="chart"
height="3000px"
></apexchart>
I get the following warning in the console;
The setting works, since if I remove that option the bar chart becomes vertical, so obviously I don't want to remove it. How do I get rid of this console warning?
I am trying to change ApexChart tooltip background colors but i couldn't do it.
They aren't same with the series colors. I tried set fillSeriesColor to true but it didn't worked, i don't know why.
Also I couldn't find the default colors to change them from css file, there is so confusing. Something must be going wrong.
My donut option codes are below, please help.. :)
var options = {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800'],
series: time,
labels: name,
chart: {
width: 350,
height: 280,
type: 'donut',
},
cutoutPercentage: 75,
responsive: !0,
maintainAspectRatio: !1,
cutout: "75%",
title: {
display: !1
},
fill: {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800']
},
animation: {
animateScale: !0,
animateRotate: !0
},
tooltip: {
fillSeriesColor: true,
x: {
fillSeriesColor: true
},
y: {
fillSeriesColor: true
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
plugins: {
legend: {
display: !1
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
donut: {
size: "85%",
labels: {
show: true,
name: {
color: "#000000",
show: true
},
value: {
color: "#000000",
show: true
},
total: {
fontSize: "12px",
color: "#000000",
show: true,
label: 'testing'
}
}
}
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 350
},
legend: {
position: 'bottom'
}
}
}]
};
I want to remove an element out of a Donout Chart from ApexCharts JavaScript version. What I have is a Chart with multiple elements and when I click a "slice" of the Donout that "slice" expands. I want to change this so when I click that element the chart removes that elements and changes the proportion. My chart looks like this:
var options = {
chart: {
type: 'donut',
width: '100%',
height: 400,
events: {
dataPointSelection: function(event, chartContext, config) {
console.log(event);
console.log(chartContext);
console.log(config);
}
}
},
title: {
text: 'Distribution of people',
align: 'center',
style: {
fontSize: '20px',
}
},
series: data['people'],
labels: datos['name_people'],
dataLabels: {
enabled: true,
enabledOnSeries: undefined,
textAnchor: 'middle',
distributed: false,
offsetX: 0,
offsetY: 0,
style: {
fontSize: '20px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 'bold',
colors: undefined
},
background: {
enabled: true,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.9,
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
},
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I usually use Array.prototype.splice to remove a data point and label.
Than I call .updateOptions to update the chart
chart: {
type: 'donut',
events: {
dataPointSelection: function(event, chartContext, config) {
// remove the data point
data.splice(config.dataPointIndex,1);
// remove the label
labels.splice(config.dataPointIndex,1);
// we can't use .updateSeries because labels are seperated in piecharts
chartContext.updateOptions({
series: data,
labels: labels
}, true)
}
},
Here's a Codepen that demonstrates this
I'm using apexcharts with vue (vue-apexcharts 1.6.1) and making horizontal barchart for UHD resolution. The apexcharts inner is overflowing the chart width which is 100%.
Here is the template code:
<template>
<div>
<apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>
And here is the chart options:
options() {
return {
chart: {
type: 'bar',
width: "100%",
height: 820,
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: this.categoryData,
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
}
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
},
fill: {
colors: ["#0E5CAD", "#EA5455", "#0396FF", "#7367F0", "#D939CD"],
type: "gradient",
gradient: {
shade: "light",
gradientToColors: [
"#79f1a4",
"#feb692",
"#abdcff",
"#ce9ffc",
"#f6ceec"
],
shadeIntensity: 1,
type: "diagonal1",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
plotOptions: {
bar: {
horizontal: true,
distributed: true,
borderRadius: 10,
barHeight: "70%",
colors: {
ranges: [
{
from: 0,
to: 0,
color: "pink"
}
],
backgroundBarColors: "#272A52",
backgroundBarRadius: 10
}
}
},
dataLabels: {
enabled: false
},
tooltip: {
enabled: false
},
responsive: [
{
breakpoint: 3199,
options: {
chart: {
height: 300
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontsize: "14px"
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
colors: {
backgroundBarRadius: 4
}
}
}
}
}
]
};
}
Here's the output of above code:
Output of above code
Output of above code with dev tools
Expected behavior:
Expected behavior design
How can I adjust the chart so that my site matches the design? Right now the font-size of label is 40px in UHD resolution.
Thanks
P.S. I'm not using flex in any ancestor elements.
I solved this issue by giving maxWidth to y-axis label and by manipulating my x-axis categories to be in multiline.
After fix image
yaxis: {
opposite: true,
labels: {
maxWidth: "auto",
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
}
I've been struggling with this problem for a while, I need to have the 100% graphic at the height of your container.
To weights that I indicate to him that his height: '100%' still follows with spaces above and below, tabiem I gave false value to yaxis but still the problem persists.
Someone who can solve it would appreciate it.
var options = {
chart: {
type: 'line',
width: '100%',
height: '100%',
toolbar: {
show: false
},
},
grid: {
show: false,
padding: {
left: 0,
right: 0
}
},
tooltip: {
intersect: false,
x: {
show: false
},
marker: {
show: false
}
},
dataLabels: {
enabled: false
},
yaxis: {
show: false,
},
xaxis: {
tooltip: {
enabled: false
},
labels: {
show: false
},
axisBorder: {
show: false
}
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}]
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
#chart{
width: 500px;
height: 200px;
border: 1px solid #000;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
If you don't need x-axis, y-axis to be displayed, you can turn on the sparkline.enabled flag to remove all unnecessary spaces above and below chart area
chart: {
sparkline: {
enabled: true
}
}