How to remove line over the stroke line in area chart - Apexchart? - vue.js

Question

How to remove line over the stroke line in area chart - Apexchart. the image
Please help me to fix this!
Here is my code so far
<template>
<div id="chart">
<apexchart
ref="pricesRef"
type="area"
height="150"
:options="options"
:series="series"
></apexchart>
<!-- <button #click="updateSeries">click</button> -->
</div>
</template>
<script>
import { axios } from 'boot/axios';
// import { dates, prices } from 'src/services/area-chart';
import { date } from 'quasar';
function formatNumber2(number, tofix) {
const val = (number / 1).toFixed(tofix).replace(',', ' ');
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
let sharePrice = [];
const dataSharePrice = [];
export default {
name: 'AreaChart',
data() {
return {
timeInterval: 0,
dataSharePrice: [],
series: [
{
name: 'Share Price',
data: [
// { x: dates[0], y: prices[1] },
// { x: 1602392287529, y: 0.05 },
],
date: [],
},
],
options: {
chart: {
type: 'area',
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
sparkline: {
enabled: true,
},
},
tooltip: {
custom({ series, w, dataPointIndex }) {
const unixTime = w.config.series[0].data[dataPointIndex].x;
const timeStamp = new Date(unixTime * 1000);
const hour = date.formatDate(timeStamp, 'DD MMMM');
return (
`
<div class="arrow_box_tooltip q-pa-md">
<span class="text-h6">
Date: ${hour}</span>
<br />
<span class="text-h6">
Share Price: $${formatNumber2(
series[0][dataPointIndex],
0,
)} USD</span>
</div>
`
);
},
},
noData: {
text: 'Loading...',
},
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
},
title: {
text: '',
align: 'left',
},
grid: {
show: false,
},
xaxis: {
type: 'datetime',
},
yaxis: {
opposite: true,
},
legend: {
horizontalAlign: 'left',
},
},
};
},
computed: {},
methods: {
getData() {
axios
.get(
'apiurl',
)
.then((response) => {
// console.log(response.data.prices);
sharePrice = response.data.prices;
})
.catch((err) => {
console.log(err);
});
},
updateSeriesData() {
for (const price of sharePrice) {
const unixTime = price[0];
if (Object.keys(price).length > 0) {
dataSharePrice.push({
x: unixTime,
y: price[1],
});
} else {
dataSharePrice.push({});
console.log('err');
}
// console.log(price[0], price[1]);
}
// console.log(dataSharePrice);
this.series[0].data = dataSharePrice;
this.$refs.pricesRef.updateSeries([
{
data: dataSharePrice,
},
]);
// console.log(this.$refs);
},
// timer() {},
},
mounted() {},
async created() {
await this.getData();
setTimeout(() => {
this.updateSeriesData();
// console.log('done');
}, 3000);
/* ; */
// this.timer();
},
beforeDestroy() {
// clearInterval(this.timer);
},
};
</script>
<style scoped>
/* #chart {
background-color: #18212f;
opacity: 1;
background-size: 7px 7px;
background-image: repeating-linear-gradient(
45deg,
#111726 0,
#111726 0.7000000000000001px,
#18212f 0,
#18212f 50%
);
} */
</style>

Answer 1

You can specify each stroke width separately by passing array
stroke: {
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: [2,0],
},