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
}
}
Related
I have problem with my chart, I want to my Pie chart use specific color for specific label, for example :
if label is "Bekerja" then chart color is #2489FF
here is my code :
var options = {
chart: {
type: "donut",
fontFamily: 'inherit',
height: 260,
sparkline: {
enabled: true
},
animations: {
enabled: true
},
},
fill: {
opacity: 1,
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
showAlways: true,
show: true
}
}
},
distributed: false,
}
},
colors: ["#2489FF", "#FFC149"],
series: jumlah,
labels: nama_status,
}
does anyone can help? thank you.
anyone can help me to solve my case, well I have an ApexCharts for show the data that can be refreshed whenever user want to and the data should be change to the updatest datas.
but I dont have idea how to reload the data ini ApexCharts
this my script
var options = {
series: [{
name: 'Stock Value',
type: 'column',
data: val_data_1
}, {
name: 'Actual Value',
type: 'column',
data: val_data_2
}, {
name: 'difference',
type: 'line',
data: val_data_3
}],
chart: {
height: 350,
type: 'line',
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: [1, 1, 4]
},
title: {
text: 'XYZ - Stock Opname',
align: 'left',
offsetX: 110
},
xaxis: {
categories: categories,
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
colors: '#008FFB',
}
},
title: {
text: "Stock Value",
style: {
color: '#008FFB',
}
},
tooltip: {
enabled: true
}
},
{
seriesName: 'Income',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
colors: '#00E396',
}
},
title: {
text: "Actual Value",
style: {
color: '#00E396',
}
},
},
{
seriesName: 'Revenue',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
colors: '#FEB019',
},
},
title: {
text: "Differences",
style: {
color: '#FEB019',
}
}
},
],
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
legend: {
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
i've have to hear for use the chart.UpdateSeries() but in my case I dnt know how to use it
Indeed, you have to use the updateSeries() method. It is documented here: Methods – ApexCharts.js
To help you, I give you an example with updateSeries() using a simple button. When you click on it, random integers are generated in the data array. The series is then updated accordingly.
let options = {
series: [{
name: 'Series',
data: [1, 7, 3]
}],
chart: {
type: 'line',
height: 350
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['Category 1', 'Category 2', 'Category 3']
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
function getRandomNumber() {
return Math.floor(Math.random() * 10);
}
document.querySelector('button').addEventListener('click', () => {
chart.updateSeries([{
data: [getRandomNumber(), getRandomNumber(), getRandomNumber()]
}])
});
button {
padding: 10px;
color: white;
background-color: #0d6efd;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
color: black;
background-color: #0dcaf0;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
<button type="button">Update series</button>
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'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 some trouble making changes in the bar of color in the apex chart. The chart is a mixed chart (Line/Bar).
I want to change a single bar color.
I've tried the solution is that is to added a fillColor into the series.data as per the apex chart documents but it does not work.
Chart Snap
enter image description here
Here is my code.
where
response.device.data.values AND response.flowmeter.values is a array of values.
if (newChart !== null) {
newChart.destroy();
}
var options = {
chart: {
height: 350,
stacked: false,
height: '400',
toolbar: {
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
customIcons: []
}
}
},
dataLabels: {
enabled: false
},
stroke: {
width: [2, 1],
curve: 'stepline'
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "<?=_('Device(s)')?> (m3)",
style: {
color: '#008FFB'
}
},
tooltip: {
enabled: true
}
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "<?=_('Flowmeter(s)')?> (m3)",
style: {
color: '#00E396',
}
}
},
],
tooltip: {
followCursor: true,
},
legend: {
horizontalAlign: 'center',
offsetX: 40
},
zoom: {
enabled: false
},
xaxis: {
categories: response.device.data.labels,
labels: {
style: {
fontSize: '10px'
}
}
},
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
data: response.flowmeter.values
}
],
};
newChart = new ApexCharts(document.querySelector("#new-chart"), options);
newChart.render();
You can set color prop in the object of the series.
Somethings like that:
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
color: "00FA9A",
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
color: "#F44336",
data: response.flowmeter.values
}
],
You could probably make use of passing a function to the fill property. Check this link: https://apexcharts.com/docs/options/fill/. You can also customize based on the series index.
colors: [function({ value, seriesIndex, w }) {
return colors(value)
}],
function colors(id) {
var colors = [
"#33b2df",
"#546E7A",
"#d4526e",
"#13d8aa",
"#A5978B",
"#2b908f",
"#f9a3a4",
"#90ee7e",
"#f48024",
"#69d2e7"
];
return colors[id] ?? '#33b2df';
}