Dynamic colouring of bar chart - error "chart.on is not a function"

Question

I need each bar to have a different colour depending on the value. I'm not familiar with Javasript. I found an example in the documentation, I copied and pasted it into my chart. But it doesn't work...

Uncaught TypeError: chart.on is not a function

Here is the code: https://codepen.io/izobretatel/pen/GRXgYwj

var dataLabels = [
  "single line",
  "anotherlongword text line",
  "another value",
  "and another",
  "fifth fragment",
  "sixth",
  "seventh longword"
];
var dataSeries = [2, -4.6, 0.8, 3.3, 5, 3.5, -3.3];

var options = {
  distributeSeries: true,
  horizontalBars: true,
  chartPadding: 5,
  chartPadding: {
    left: 100,
    top: 0,
    right: 10,
    bottom: 0
  },
  axisY: {
    offset: 5,
    showLabel: true,
    showGrid: false
  },

  fullWidth: false
};

new Chartist.Bar(
  ".ct-chart",
  { labels: dataLabels, series: dataSeries },
  options
);



// I copied this piece of code from here https://gionkunz.github.io/chartist-js/getting-started.html#colour-up-your-charts

chart.on("draw", function (context) {
  if (context.type === "bar") {
    // With the Chartist.Svg API we can easily set an attribute on our bar that just got drawn
    context.element.attr({
      style:
        "stroke: hsl(" +
        Math.floor((Chartist.getMultiValue(context.value) / max) * 100) +
        ", 50%, 50%);"
    });
  }
});

How do I make it work? So that bars close to -5 are red, those close to zero are yellow and those close to 5+ are green.