Reputation: 21
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