Why is the fill color gradient not applying to the last three colors?
Does anyone have a solution for this issue?
Perhaps some changes need to be made to the file.
https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js
optionsos = {
chart: {
height: 225,
type: "pie"
},
stroke: {
curve: "smooth",
width: 0
},
series: [30, 15, 25, 18, 20, 13, 15, 10, 23, 25],
labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5", "Series 6", "Series 7", "Series 8", "Series 9", "Series 10"],
colors: ["#99b3ff", "#4ca6ff", "#0080ff", "#006cd9", "#00468c", "#6c00d9", "#ffbfff", "#7396ff", "#3600d9", "#ff99ff"],
plotOptions: {
pie: {
expandOnClick: true,
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: '#5c26ff',
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [2, 18, 28, 100, 60, 150],
colorStops: []
}
},
legend: {
show: !1,
},
};
chartart = new ApexCharts(document.querySelector("#pie_chart"), optionsos).render();<div class="col-xl-4">
<div class="card text-center" style="max-height: 280px; min-height: 280px;">
<div class="card-body">
<h4 class="card-title mb-4">Top 10</h4>
<div id="pie_chart" height="300"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js
"></script>