Chartist-js: Click event on chart

[cheves505]

Looking through the source and the examples, I'm trying to establish how to create a custom event handler via addEventHandler when click on one object of char for example in a bar and open a modal or something like that. I can see how to create the event handler and emit it, but how exactly would your trigger the emit?

[gionkunz]

Hi there. Check this example: http://gionkunz.github.io/chartist-js/getting-started.html#adding-behaviour-to-your-charts

[gionkunz]

Im closing this issue. Please let me know if you need more help.

[moneytree-doug]

I remember seeing an example somewhere for hover and click, but I can't seem to find it. That link doesn't seem to take me to an example that I am expecting.

[gionkunz]

The example was removed in favor of the tooltip example. We need a new example that shows how to add DOM listeners. However, you can perform the same operations as with every other DOM. Just use querySelector, addEventListener and the like.

[moneytree-doug]

@gionkunz I tried looking, but couldn't find the tooltip example. Perhaps I am looking for the wrong keywords? Do you mind giving me that link please?

[Quas94]

Hi, I too would be really interested in the tooltip example - I can't find it either.

[ediabal]

I'm trying to do the same and my approach is:

chart.on('draw', (data) => {
  if(data.type === 'point') {
    $(data.element).addEventListener('click', this._handleClick.bind(this));
  }
});

Not sure what I'm doing wrong here.

Edit:
Resolved with the following bit...

  _addChart() {
    const chart = ReactDOM.findDOMNode(this.refs.chart);
    const { data: chartData, options: chartOptions, selectedPoint} = this.props;
    const options = _.merge(this._defaultOptions(), chartOptions);
    this.chartistChart = new Chartist.Line(chart, {
      labels: chartData.labels,
      series: chartData.series
    }, options);

    if (!_.isNil(selectedPoint)) {
      this.chartistChart.on('draw', (data) => {
        if(data.type === 'point' && data.index == selectedPoint) {
          data.element.attr({
            style: 'stroke-width: 10px;'
          });
        }
      });

      this.chartistChart.on('created', (data) => {
        $(chart).on('click', '.ct-point', this._handleClick.bind(this));
      });
    }
  }

[RedShift1]

The documentation link is dead