Hey Henrik, let's walk through the most common pitfalls that might be stopping your MQTT data from rendering in Chart.js—since you've already nailed the MQTT connection, subscription, and basic data reception, we can focus on the Chart.js-specific pieces.

Common Issues & Fixes #

1. Your Chart Instance Isn't Accessible in the MQTT Callback #

If you created your Chart inside a function (like an initialization function) without making it globally accessible, the MQTT message handler won't be able to update it.

Fix: Declare the Chart instance in a scope that's accessible to both your initialization code and the MQTT callback:

// Declare the Chart instance globally (or in a shared module scope)
let mqttChart;

function initChart() {
  const ctx = document.getElementById('mqtt-data-chart').getContext('2d');
  mqttChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [], // Will hold timestamps or topic names
      datasets: [{
        label: 'MQTT Sensor Data',
        data: [], // Will hold your incoming values
        borderColor: '#2ecc71',
        fill: false
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: { beginAtZero: true }
      }
    }
  });
}

2. You're Not Updating the Chart Properly #

Chart.js doesn't auto-refresh when you modify its data arrays—you need to explicitly call update() after making changes. Also, avoid replacing the entire data object directly; modify the existing arrays instead.

Correct MQTT Message Handler Example:

client.on('message', (topic, message) => {
  // First, parse your incoming message (adjust based on your data format)
  const rawValue = message.toString();
  const numericValue = parseFloat(rawValue); // Use JSON.parse() if it's a JSON object

  // Skip invalid data to avoid breaking the chart
  if (isNaN(numericValue)) return;

  // Add new data points to the Chart's arrays
  const currentTime = new Date().toLocaleTimeString(); // Or use topic name as label
  mqttChart.data.labels.push(currentTime);
  mqttChart.data.datasets[0].data.push(numericValue);

  // Optional: Limit the number of visible data points (prevents chart clutter)
  const maxDataPoints = 25;
  if (mqttChart.data.labels.length > maxDataPoints) {
    mqttChart.data.labels.shift();
    mqttChart.data.datasets[0].data.shift();
  }

  // Critical: Tell Chart.js to re-render with the new data
  mqttChart.update();
});

3. Topic Filtering or Data Parsing Errors #

You mentioned storing subscribed topics in an array—double-check that your callback is correctly filtering or using those topics. For example, if you only want to display data from specific topics:

const trackedTopics = ['sensor/temperature', 'sensor/pressure'];

client.on('message', (topic, message) => {
  if (!trackedTopics.includes(topic)) return; // Skip uninteresting topics

  // Parse and update chart data here...
});

Also, confirm your message parsing matches the format your MQTT broker sends. If the message is a JSON object (e.g., {"value": 23.5}), you'll need to parse it first:

const messageData = JSON.parse(message.toString());
const numericValue = messageData.value;

4. Chart Initialization Happens Before the DOM is Ready #

If you try to initialize the Chart before the <canvas> element exists in the DOM, getElementById will return null, and your Chart won't be created.

Fix: Wrap your Chart initialization in a DOM ready listener:

document.addEventListener('DOMContentLoaded', () => {
  initChart();
  // Initialize your MQTT connection here too!
});

Next Steps #

If you're still stuck, sharing a small snippet of your code (specifically the Chart initialization and MQTT message handler) would help pinpoint the exact issue. But start with the checks above—most of the time, it's a scope issue, missing update() call, or data parsing mistake.

内容的提问来源于stack exchange，提问作者Henrik