Chart.js Treemap plugin showing coordinate data in chart image rendered

187 Views Asked by At

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.
0

There are 0 best solutions below