How to use updateConfig

Hi,

Really liking v2.5.0 (especially being able to update options now). The only problem i’m having is how to call updateConfig. I’ve tried a few different things including:

(for the sake of these examples, the chart instance will be called chartInst)

• Chart.updateConfig(chartInst)
• chartInst.updateConfig(newOptions)
• chartInst.updateConfig()
• updateConfig(chartInst)

But none of these work and there’s nothing in the documentation to explain how to use this new feature. Is anyone able to give me some insight into how it’s used?

[vdh]

@etimberg

This really simple attempt at updating options fails horribly:

chart.options = newOptions;
chart.update();

This would be much less of a headache if the options object (and data, while we’re at it) wasn’t mutated internally…

[vdh]

@etimberg That’s exactly what I’ve had to do to update the options:

import mergeWith from 'lodash/mergeWith';

const chartJsCustomizer = (existingValue, newValue) => {
  if (Array.isArray(existingValue)) {
    if (
      Array.isArray(newValue) &&
      existingValue.length === newValue.length &&
      existingValue.length > 0 &&
      typeof existingValue[0] === 'object'
    ) {
      // Two arrays of same length with objects, mutate each item instead
      existingValue.forEach((item, index) => {
        mergeWith(item, newValue[index], chartJsCustomizer);
      });
      return existingValue;
    }
    // Replace old array with new value
    return newValue;
  }
  // Default to lodash merge logic
  return undefined;
};

// later…

// Update the options
mergeWith(chart.options, newOptions, chartJsCustomizer);

But the caveats are:

• It only works if nothing is added/removed to arrays.
• Can’t remove options that aren’t explicitly null-ed, due to the merge strategy.
• It will silently fail if an array length doesn’t change due to an even number of additions & removals, because there’s no proper way to track the identity of array items without hardcoding checks for specific options.

This is the kind of rabbit hole that happens when objects are mutated instead of copied 😢