sgratzl / chartjs-chart-geo

Chart.js Choropleth and Bubble Maps
https://www.sgratzl.com/chartjs-chart-geo/
MIT License
347 stars 36 forks source link

Tooltip are not showing #241

Closed leoatfentech closed 1 week ago

leoatfentech commented 1 month ago

I'm wondering why tooltip are not showing when hovering my map ?

Followed the examples from the docs but can't find what doing wrong.

image

here the code I'm using :

<template>
    <ChoroplethChart :data="data" :options="options" />
</template>

<script setup lang="ts">
import { ChoroplethChart } from '@/components/fen-chart/custom-vue-charts/ChoroplethChart'
import { ChartConfiguration, ChartOptions } from 'chart.js'
import { type Feature, topojson } from 'chartjs-chart-geo'

import fr from './fra.topo.json'

const regions: Feature = fr.features

console.log(regions)

const data: ChartConfiguration<'choropleth'>['data'] = {
    labels: regions.map((d) => d.properties.nom),
    datasets: [
        {
            label: 'Régions',
            outline: regions,
            data: regions.map((d) => ({
                feature: d,
                value: Math.random() * 11,
            })),
        },
    ],
}

const options: ChartOptions<'choropleth'> = {
    responsive: true,
    showOutline: false,
    showGraticule: false,
    plugins: {
        legend: {
            display: false,
        },
    },
    scales: {
        projection: {
            axis: 'x',
            projection: 'mercator',
        },
        color: {
            axis: 'y',
            interpolate: 'purples',
            missing: 'white',
            legend: {
                position: 'bottom-right',
            },
        },
    },
}
</script>

Changing legend to true or false does nothing

Context

sgratzl commented 4 weeks ago

the tooltip plugin is separate in chart.js and need to explicitly registered.