I am creating a treemap using the plugin, and it is working fine except for the context.raw data being printed in the svg of rendered Chart. Note that i have used single field so problem is easily visible, otherwise there is this coorpdiante data shown for every rectenangle of treemap. Below is the snapshot and code i used PS-Do take a look at attached image via link.
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
import { color } from "chart.js/helpers";
import { TreemapController, TreemapElement } from "chartjs-chart-treemap";
import { Chart } from "react-chartjs-2";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
TreemapController,
TreemapElement
);
export const TreeMapChart = (props) => {
const data = props.datasets.map((el, index) => {
return { name: props.labels[index], value: el };
});
const colors = [
"#735FA4",
"#F39459",
"#E0044E",
"#61BA93",
"#43224D",
"#A9264F",
"#3265AA",
"#4CB4E6",
"#F288AC",
"#A297B4",
"#993684",
"#4C4C4D",
];
const options = {
plugins: {
title: {
display: false,
text: "Treemap Example",
},
legend: {
display: false,
},
tooltip: {
displayColors: true,
callbacks: {
title(items) {
// console.log(items);
return items[0].raw._data.name;
},
label(item) {
const {
_data: { value },
} = item.raw;
return [Number of docs: ${value} ];
},
},
},
},
};
const config = {
type: "treemap",
data: {
datasets: [
{
tree: data,
key: "value",
labels: {
display: false,
formatter: (context) => {
console.log(context);
return context.raw._data.name;
},
},
backgroundColor(context) {
if (context.type !== "data") return "transparent";
var { value } = context.raw._data;
value = value / props.totalDatasets;
if (value === 0) {
return color("grey").rgbString();
} else {
const fieldIndex = context.dataIndex % colors.length;
// return colors[fieldIndex];
return color("black");
}
},
},
],
},
};
return (
);
};```
[For better visibility, I have used dataset for just one field, but in action these coordinates are shown in every rectangular tile and I have also
changed the color of chart and hidden the label]
(https://i.stack.imgur.com/J5F1t.png)
I looked at the context and comes out this data is stored in context.raw array. I am unable to figure out what's causing it to render on the chart image.