We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
import React, { useEffect } from 'react';
import
const TreemapChart = ({ data }) => { useEffect(() => { const loadScript = (url, callback) => { const script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.async = true; script.onload = callback; document.head.appendChild(script); };
// Dynamically load Chart.js script loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js', () => { // Dynamically load Chart.js treemap extension script loadScript('https://cdn.jsdelivr.net/npm/[email protected]', () => { // Check if both Chart.js and Chart.js treemap scripts have been loaded if (window.Chart && window.Chart.controllers && window.Chart.controllers.treemap) { const canvas = document.getElementById('treemapCanvas'); const ctx = canvas.getContext('2d'); const config = { type: 'treemap', data: { datasets: [ { data: data.map((segment) => ({ v: segment.count, x: segment.ar, y: segment.af, z: segment.am, })), backgroundColor: data.map((segment) => getBackgroundColor(segment.segment)), labels: data.map((segment) => `${segment.segment} - ${segment.count}`), }, ], }, options: { onClick: (event, elements) => { if (elements && elements.length > 0) { const clickedIndex = elements[0].index; console.log('Item clicked', clickedIndex); } }, maintainAspectRatio: false, title: { display: false, text: 'Basic treemap sample', }, legend: { display: false }, tooltips: { callbacks: { title: (item, chartData) => `This item: ${item[0].index}`, label: (item, chartData) => { const dataset = chartData.datasets[item.datasetIndex]; const dataItem = dataset.data[item.index]; return dataItem.v; }, }, }, }, }; new window.Chart(ctx, config); // Note the use of window.Chart } }); });
}, [data]);
return ; };
const getBackgroundColor = (segment) => { // Customize color logic based on your segments switch (segment) { case 'High-Value': return 'rgba(75, 192, 192, 0.6)'; case 'At-Risk': return 'rgba(255, 99, 132, 0.6)'; case 'Low-Value': return 'rgba(255, 255, 102, 0.6)'; case 'Mid-Value': return 'rgba(102, 204, 255, 0.6)'; case 'Churned': return 'rgba(204, 102, 255, 0.6)'; case 'Superfans': return 'rgba(255, 153, 51, 0.6)'; case 'Potential Loyalists': return 'rgba(51, 204, 51, 0.6)'; default: return 'rgba(0, 0, 0, 0.6)'; } };
export default TreemapChart; `
The text was updated successfully, but these errors were encountered:
You should be using the npm packages with react.
Simple example: https://codesandbox.io/p/sandbox/epic-easley-qgg9y4
Sorry, something went wrong.
No branches or pull requests
import
React, { useEffect } from 'react';const TreemapChart = ({ data }) => {
useEffect(() => {
const loadScript = (url, callback) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = true;
script.onload = callback;
document.head.appendChild(script);
};
}, [data]);
return ;
};
const getBackgroundColor = (segment) => {
// Customize color logic based on your segments
switch (segment) {
case 'High-Value':
return 'rgba(75, 192, 192, 0.6)';
case 'At-Risk':
return 'rgba(255, 99, 132, 0.6)';
case 'Low-Value':
return 'rgba(255, 255, 102, 0.6)';
case 'Mid-Value':
return 'rgba(102, 204, 255, 0.6)';
case 'Churned':
return 'rgba(204, 102, 255, 0.6)';
case 'Superfans':
return 'rgba(255, 153, 51, 0.6)';
case 'Potential Loyalists':
return 'rgba(51, 204, 51, 0.6)';
default:
return 'rgba(0, 0, 0, 0.6)';
}
};
export default TreemapChart;
`
The text was updated successfully, but these errors were encountered: