I’m having an issue with a custom chart widget in our analytics dashboard. After implementing data format validation on the incoming dataset, the chart stopped rendering completely. The widget configuration looks correct and the data validation passes, but the chart area remains blank.
Here’s the validation code I added:
if (!data.metrics || data.metrics.length === 0) {
throw new Error('Invalid data format');
}
The console shows no errors, and the data structure matches what the chart library expects. The widget worked fine before adding validation logic. Has anyone encountered similar chart rendering issues after modifying data processing in custom analytics widgets?
Good catch on the async issue. I checked and the data is definitely there - console shows valid metrics array. But I noticed the chart container div has a height of 0px after validation runs. Before validation, it was auto-sizing correctly. Could the validation be affecting the DOM rendering cycle somehow?
This happened to me last month. The issue was that my validation was synchronous but the chart rendering expected a promise. HubSpot’s custom widget framework can be picky about async operations. Try returning your validated data as a resolved promise even if your validation is sync.
Check your widget configuration settings in the Custom Reports module. Sometimes the data binding gets disconnected when you modify the data pipeline. Make sure the chart component is still properly linked to your data source. I’d also verify that the validation isn’t accidentally filtering out all your data points. Can you console.log the data right before it hits the chart renderer to confirm there’s actually data there? The blank chart usually means either no data or a broken reference to the chart container element.
I’ve seen this before. The validation might be throwing errors that aren’t caught properly. Try wrapping your validation in a try-catch and log the actual error. Also check if your chart initialization is waiting for the validated data or if there’s a timing issue.
I’ve debugged this exact scenario multiple times in hs-2023 Custom Reports. The problem is a combination of all three focus areas working against you.
Data Format Validation Issue:
Your validation is too strict and runs at the wrong time. The chart library needs the data object structure to exist even before metrics populate. Move your validation after the initial data object creation:
const chartData = { metrics: [], labels: [] };
if (data && data.metrics && data.metrics.length > 0) {
chartData.metrics = data.metrics;
chartData.labels = data.labels;
}
Chart Rendering Logic Fix:
The 0px height happens because validation delays data availability. Add explicit dimensions in your widget configuration and force a re-render after validation:
widgetConfig.height = 400;
chartInstance.update({ duration: 0 });
Widget Configuration Requirements:
In your widget’s JSON config, ensure these properties are set:
dataRefreshMode: 'manual' - lets you control when chart updatesrenderOnDataReady: true - waits for validation to completedimensions.minHeight: 300 - prevents collapse
The key insight is that HubSpot’s custom widget framework renders the container before data validation completes. You need to handle the empty state gracefully, set explicit dimensions, and manually trigger chart updates after validation. This approach maintains data integrity while ensuring proper rendering.
Test this by temporarily removing validation - if the chart renders, you know the issue is in the validation timing. Then reintroduce validation with the manual refresh approach. This pattern works reliably across different chart libraries in the Custom Reports module.