Can I use it with vue.js ?

[Larshavin]

Hi, I made my webpage with Vue.js (& not familiar in chart.js) In this document, it give me just only plain javascript example. I'm trying to npm install all package and import just like a

<script>
import {Chart} from 'chart.js';
import {ChartDatasourcePrometheusPlugin} from 'chartjs-plugin-datasource-prometheus';
... 

in vue.js file, And use document's example almost same in some function

createChart(charId, q) {
            const ctx = document.getElementById(charId)
            console.log(charId, q)
            this.myChart = new Chart(ctx, {
                type: 'line',
                plugins: [{ChartDatasourcePrometheusPlugin}],
                options: {
                    plugins: {
                        'datasource-prometheus': {
                            prometheus: {
                                endpoint: this.promEndpoint,
                                baseURL: "/api/v1",   // default value
                            },
                            query: q,
                            timeRange: {
                                type: 'relative',
                                // from 12 hours ago to now
                                start: -12 * 60 * 60 * 1000,
                                end: 0,
                            },
                        },
                    },
                },
            }); }

When this code applied, there is no error but just empty canvas exsisted.

How should I apply this package into vue.js properly?

[samber]

Any error in the console?

Unfortunately, I'm not a user of VueJs, but i don't see any reason for incompatibility.

What version of chartjs do you use ?

[dchappelle]

@Larshavin I am using this plugin in Vue.js. Here is how I have it setup.

<div class="metrics">
    <canvas ref="canvas" width="400" height="200"></canvas>
</div>

import Chart from 'chart.js';
import ChartDatasourcePrometheusPlugin from 'chartjs-plugin-datasource-prometheus';

myChart = new Chart(canvas.value, {
     . . .
}

[samber]

what is the chartId ? In your example, i don't see any id on canvas.

[dchappelle]

I don't have one

[samber]

See https://github.com/samber/chartjs-plugin-datasource-prometheus/blob/master/example/main.js