Search code examples
cssvue.jscharts

Chartjs charts are always on top

I have the following problem:

enter image description here

When I open my vue-datepicker it does not display on top of the canvas. So far I tried to change the z-index in browser dev console of the canvas. For example setting position: relative and z-index:10 and setting the drop down of the picker to z-index:50

I can't figure out why the canvas is always on top of everything.

Here the relevant code

<Tile :isLoading="!calculatedConsumption" class="col-span-1 row-span-2">
        <template #title>
            <div class="w-full flex gap-4">
                <h1 class="text-xl font-bold mr-auto">Jahresverbrauch</h1>
                <div class="w-full">
                    <VueDatePicker v-model="selectedYear" :minDate="new Date(2021,0,1)" :maxDate="new Date()" :preventMinMaxNavigation="true" :autoApply="true" :yearPicker="true" :format-locale="de" locale="de"  dark />
                </div>
            </div>
        </template>
        <template #default>
            <div class="h-72" v-if="calculatedConsumption">
                <ConsumptionChart :v1="calculatedConsumption.v1"
                    :v2="calculatedConsumption.v2" :v3="calculatedConsumption.v3"
                    :title="'Heizen'" />
            </div>
        </template>
    </Tile>

And the chart code:

 <Pie :data="{
        labels: ['v1', 'v2', 'v3'],
        datasets: [
            {
                borderColor: ['#4ADE80', '#D1495B', '#48639C'],
                backgroundColor: ['#4ADE80', '#D1495B', '#48639C'],
                data: [v1, v2, v3],
            }
        ]
    }" :options="{
    maintainAspectRatio: false,
    plugins: {
        legend: {
            labels: {
                color: '#fff'
            }
        },
        title: {
            text: title,
            display: true,
            color: '#fff'
        },
        tooltip: {
            callbacks: {
                label: (i) => {
                    return `${i.formattedValue}kWh`
                }
            }
        }
    }
}" />
Solution

  • In the html, could you place the chart before the date picker?

    z-index only works on elements in the same stacking context, so setting the position as relative might not work, and it only sort the depth of elements at the same nesting level. So, you can also try to change the z-index of the parents of the chart and datepicker.