Gizlilik Sözleşmesi
<!-- simple bar -->
<apexchart height="300" :options="barChart" :series="barChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
<!-- script -->
<script lang="ts" setup>
import { ref, computed } from 'vue';
import apexchart from 'vue3-apexcharts';
import { useAppStore } from '@/stores/index';
const store = useAppStore();
const barChart = computed(() => {
const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
const isRtl = store.rtlClass === 'rtl' ? true : false;
return {
chart: {
height: 300,
type: 'bar',
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 1,
},
colors: ['#4361ee'],
xaxis: {
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
axisBorder: {
color: isDark ? '#191e3a' : '#e0e6ed',
},
},
yaxis: {
opposite: isRtl ? true : false,
reversed: isRtl ? true : false,
},
grid: {
borderColor: isDark ? '#191e3a' : '#e0e6ed',
},
plotOptions: {
bar: {
horizontal: true,
},
},
fill: {
opacity: 0.8,
},
};
});
const barChartSeries = ref([
{
name: 'Sales',
data: [44, 55, 41, 67, 22, 43, 21, 70],
},
]);
</script>