Hello everyone,
I am setting up a chart and i am having some troubles with the colors.
I am using a script for the chart and i chose the colors but the chart it's still with the default colors.
Chart:
<dmx-chart id="chart2" point-size="" type="pie" responsive="true" dataset-1:value="count" dataset-1:label="count" dmx-bind:data="chart_symboldistribution.data.query" label-x="chart_symboldistribution.data.query[0].count" label-y="chart_symboldistribution.data.query[0].symbol" labels="symbol" dmx-bind:config="pieChartConfig" legend="right" class="style1517" dmx-bind:dataset-1:background-color="pieChartConfig.colors"></dmx-chart>
Script:
<script>
dmx.global.set('pieChartConfig', {
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
enabled: false, // Disable default tooltip
external: function(context) {
// Get or create tooltip element
let tooltipEl = document.getElementById('chartjs-tooltip-pie');
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip-pie';
tooltipEl.style.pointerEvents = 'none';
tooltipEl.style.position = 'absolute';
tooltipEl.style.transition = 'all .1s ease';
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
const tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Get the symbol and color from the chart
const dataIndex = tooltipModel.dataPoints[0].dataIndex;
const symbol = tooltipModel.dataPoints[0].label;
const value = tooltipModel.dataPoints[0].parsed;
const backgroundColor = context.tooltip.labelColors[0].backgroundColor;
// Set tooltip content and styles
tooltipEl.innerHTML = `<div style="
background: ${backgroundColor};
color: #ffffff;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: light;
letter-spacing: 0.1em;
padding: 8px 12px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
">${symbol}: ${value}</div>`;
// Position tooltip
const position = context.chart.canvas.getBoundingClientRect();
tooltipEl.style.opacity = 1;
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
}
}
}
},
colors: ['#007bff', '#ffc107', '#dc3545', '#A680ff']
});
</script>