samhuang95
samhuang95

Reputation: 21

How to hide the chartjs-chart-treemap text data

enter image description here

Here is my Vue3 project issue, I use chart.js package "chartjs-chart-treemap" to draw As you can see in the picture, there is a gray text that should not appear.

My chart.js version is "chart.js": "^3.9.1", and "chartjs-chart-treemap": "^2.3.0", I know the version is not really a good match.

but I can not change the chart.js version Is there another way to hide those gray text? thanks🙏

I researched the official document but I didn't find any way to hide it, GPT does not has batter result.

Here is my minimal reproducible example code:

Vue.js component

<template>
    <div v-show="flag">
        <canvas width="400" height="400" ref="uniqueNam"></canvas>
    </div>
</template>
import { Chart } from 'chart.js';
import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
import * as chartConfig from './chartConfig.js';

Chart.register(TreemapController, TreemapElement);
export default {
    data() {
        return {
            chartConfig: { ...chartConfig, config: { ...chartConfig.config } },
        };
    },
};

chartConfig.js code

export const config = {
    type: 'treemap',
    data: {
        datasets: [
            {
                label: 'Fruits',
                tree: [
                    {
                        what: 'Apples',
                        value: 100,
                        color: 'rgb(191, 77, 114)',
                    },
                    {
                        what: 'Orange',
                        value: 55,
                        color: 'rgb(228, 148, 55)',
                    },
                    {
                        what: 'Lime',
                        value: 69,
                        color: 'rgb(147, 119, 214)',
                    },
                    {
                        what: 'Grapes',
                        value: 55,
                        color: 'rgb(80, 134, 55)',
                    },
                    {
                        what: 'Apricots',
                        value: 49,
                        color: 'rgb(90, 97, 110)',
                    },
                    {
                        what: 'Blackberries',
                        value: 35,
                        color: 'rgb(34, 38, 82)',
                    },
                ],
                key: 'value',
                borderWidth: 0,
                borderRadius: 6,
                spacing: 1,
                backgroundColor(ctx) {
                    if (ctx.type !== 'data') {
                        return 'transparent';
                    }
                    return ctx.raw._data.color;
                },
                labels: {
                    align: 'center',
                    display: true,
                    formatter(ctx) {
                        if (ctx.type !== 'data') {
                            return;
                        }
                        // return [ctx.raw._data.what, 'Value is ' + ctx.raw.v];
                        return [ctx.raw._data.what];
                    },
                    color: ['white', 'whiteSmoke'],
                    font: [{ size: 20, weight: 'bold' }, { size: 12 }],
                    position: 'center',
                },
            },
        ],
    },
    options: {
        events: [],
        plugins: {
            title: {
                display: false,
                text: 'Different fonts and colors on labels',
            },
            legend: {
                display: false,
            },
            tooltip: {
                enabled: false,
            },
        },
    },
};

Upvotes: 2

Views: 164

Answers (0)

Related Questions