Error: Cannot read property 'tooltip' of undefined

Hello,

I am using and existing Angular2-Bootstrap template for my dashboard application and it had some Chartist bar and lines charts with them. I am ableto load data from an API into the chart as expected, but when I try to add the tooltip plugin onto the chart, I get this error

Cannot read property ''tooltip’of undefined.

When I remove the code, the graph draws properly, when I just insert the plugin, the graph doesn’t render and nothing else executes within the page.

Here is what I have. In my package.json,

"chartist-plugins-tooltip": "0.0.11"

In my dashboard.ts

const dataFromAPI = {
labels: data.labels,
series: [data.series]
};

const optionsForChart = {
 axisX: {
   showGrid: false,
  },
low: 0,
high: 500,
chartPadding: { top: 0, right: 5, bottom: 0, left: 0},
plugins: [
 Chartist.plugins.tooltip() // This is where I get the error. Cannot read property 'tooltip' of undefined
]
}
const responsiveOptions = {
 .......
}

const createChartForDataFromAPI = new Chartist.Line('#idofthechart',dataFromAPI, optionsForChart, responsiveOptions);

I have no idea why I get this error. Anything I’'m doing wrong?

[Gergely1987]

I used chartist in an angular project, and for me the solution was that to use it:

import * as Legends from ‘chartist-plugin-legend’; //or import any other plugin that You are using and in the constructor initalize an object: var legend = Legends;

and use this object in the chart options plugins: plugins: [ Chartist.plugins.legend({ legendNames: classNames, position: ‘bottom’ }) ]

[kairauer]

@estomagordo You can find it in this file: https://github.com/tmmdata/chartist-plugin-tooltip/blob/v0.0.17/dist/chartist-plugin-tooltip.js#L204