I have a bar chart that looks like this:
And I want to make it look like this:
I managed to remove the labels, set the correct column width, column radius, color and so on, but the position and spacing are quite odd…
As you can see, there is a big margin around the chart, and it does not fit 100% the width nor it has the correct height, even with the chart.height and chart.width options set
This is my chart component:
<script setup lang="ts">
import BaseCard from '~/shared/components/molecules/BaseCard.vue'
import { CardType } from '~/shared/components/molecules/BaseCardProps'
import { useCurrencyFormatter } from '~/shared/composables/useCurrency'
import { addMoney, type Money } from '~/shared/models/Money'
const props = defineProps<{
title: string,
dataSeries: number[]
}>()
const chartOptions = {
dataLabels: {
enabled: false
},
chart: {
toolbar: {
show: false
},
zoom: {
enabled: false
},
height: '32px',
width: '100%'
},
colors: ['var(--color-bg-brand-primary)'],
plotOptions: {
bar: {
columnWidth: 4,
borderRadius: 1
}
},
legend: {
show: false
},
grid: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
yaxis: {
lines: {
show: false
}
},
xaxis: {
lines: {
show: false
}
}
},
yaxis: {
labels: {
show: false
}
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
}
}
const series = [
{
data: props.dataSeries
}
]
const total = computed<Money>(() => {
return props.dataSeries.map((value) => { return { amount: value, currency: 'BRL' } }).reduce((acc, current) => addMoney(acc, current) ?? acc, { amount: 0, currency: 'BRL' })
})
</script>
<template>
<BaseCard class="chart-card" :type="CardType.Elevated">
<div class="title-small color-text-default">
{{ props.title }}
</div>
<div class="headline6-strong color-text-default">
{{ useCurrencyFormatter(total) }}
</div>
<apexchart
type="bar"
:options="chartOptions"
:series="series"
/>
</BaseCard>
</template>
<style lang="scss" scoped>
.chart-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
</style>