Add tooltip plugin

[50l3r]

Hi guys,

¿How can i add tooltip plugin to vue-chartist?

I try with:

import chartist from 'vue-chartist'
import chartist_tooltip from 'chartist-plugin-tooltips'

vue.use(chartist,{
    plugins: [
         chartist_tooltip
    ],
})

[hitautodestruct]

@50l3r The plugin definition goes into your options configuration per component. You would have to import it in the vue component like you did and then set it up like so:

<template>
    <chartist :data="chart_data" :options="chart_options" type="Line" />
</template>
<script>
import chartist_tooltip from 'chartist-plugin-tooltips'

export default {
  data () {
    return {
      chart_options: {
        plugins: [ chartist_tooltip() ]
      }
    }
  }
}
</script>

[50l3r]

I recieve this error:

    vue.esm.js?efeb:591 [Vue warn]: Error in data(): "TypeError: __WEBPACK_IMPORTED_MODULE_3_chartist_plugin_tooltips___default(...) is not a function"

    found in

    ---> <Dashboard> at src\components\Dashboard.vue
           <App> at src\components\App.vue
             <Root>

[funami-dev]

@50l3r that's the same with me. https://www.npmjs.com/package/chartist-plugin-tooltip works. (the package without an s at the end)

If you dont want the jquery version: https://github.com/tmmdata/chartist-plugin-tooltip/issues/152#issuecomment-395361512

or in vue components Imports

import * as ChartistTooltips from 'chartist-plugin-tooltips';

Options

plugins: [this.$chartist.plugins.tooltip()]

[50l3r]

Works well but tooltip positioned in top left:

[50l3r]

Fixed with some css

.chartist-tooltip{ position: absolute; background: rgba(0,0,0,0.6); color: white; padding: 0px 10px; border-radius: 5px; }

[matteoraf]

@50l3r that's the same with me. https://www.npmjs.com/package/chartist-plugin-tooltip works. (the package without an s at the end)

If you dont want the jquery version: tmmdata/chartist-plugin-tooltip#152 (comment)

or in vue components Imports

import * as ChartistTooltips from 'chartist-plugin-tooltips';

Options

plugins: [this.$chartist.plugins.tooltip()]

This way the linter complains about ChartistTooltips never being used. Any workaround besides disabling linting for that line?

[matteoraf]

Ok, I got it working by putting

import Vue from 'vue'
import 'chartist/dist/chartist.min.css'
import 'chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.min'

Vue.use(require('vue-chartist'))

in a plugin file and then imported it in my main.js