Basic `choo-chartist` example (destroys chart)

choo-chartist.js

const html = require('choo/html')

const Chartist = require('chartist')
let chartist;

const data = {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  series: [
    [12, 9, 7, 8, 5],
  ]
}

const options = {
  fullWidth: true,
  chartPadding: {
    right: 40
  }
}

const type = 'Line'

const conf = { type: type, data: data, options: options }

function onLoad() {
  updateChart(conf)
}

function updateChart(config) {
  let { type, data } = config;
  let options = config.options || {};
  let responsiveOptions = config.responsiveOptions || [];

  if (chartist) {
    chartist.update(data, options, responsiveOptions);
  } else {
    chartist = new Chartist[type]('.ct-chart', data, options, responsiveOptions);
  }
}

module.exports = function (state, prev, send) {
  if (chartist) {
    updateChart(conf)
  }
  return html`
    <div onload=${(el) => {onLoad()}} class="ct-chart"/>
  `
}

At the moment, onload triggers updateChart() which creates a Chartist which eventually attaches itself to the .ct-chart element. This renders, but when the component receives new state, the svg contents of the container element are removed.

I understand the basics of virtual dom/diffing, but I'm insufficiently experienced or knowledgeable to understand what precisely is going on behind the scenes, and how my approach should change to see that chart persist across state changes.