Individual apexchart for school project #1330
Description
I am working on the design for 1 month (that is long for a school project) and I cannot reproduce the exact design. Maybe if you have time, you could help me out.
The one entry with other colors, is the selected person ( We get him from backend).
Expected:
Actual:
Code:
const options = {
chart: {
height: 350,
type: 'bar',
stacked: true,
sparkline: { enabled: true },
toolbar: { show: false },
},
grid: {
show: false,
yaxis: {
lines: {
show: false,
}
},
xaxis: {
lines: {
show: false,
},
axisBoder: {
show: true,
}
}
},
plotOptions: {
bar: {
barHeight: '65%',
horizontal: true,
dataLabels: {
position: 'bottom'
},
},
},
colors: /['#3DC665', '#9ee3b2']/[function({ value, seriesIndex, w }) {
if (value < 55) {
return '#3DC665';
} else {
return '#3DC665';
}
}, function({ value, seriesIndex, w }) {
if (value < 111) {
return '#9ee3b2';
} else {
return '#9ee3b2';
}
}
],
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter(val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + '\t' + val;
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
series: [{
data: this.score,
}, {
data: [20, 19, 45, 12, 45]
}],
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: this.categories,
},
yaxis: [{
lables: {
align: 'center',
show: true,
},
},
],
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter () {
return '';
}
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
};
let chart = new ApexCharts(
document.querySelector('#chart'),
options
);
chart.render();