j-t-mcc / vue3-chartjs Goto Github PK

View Code? Open in Web Editor NEW

118.0 5.0 23.0 1.64 MB

Vue3 wrapper for ChartJS

License: MIT License

JavaScript 57.43% Vue 29.01% HTML 13.55%

chartjs vue3-chartjs vue3 vue charts chartjs3

vue3-chartjs's Introduction

Vue3 ChartJS Wrapper

Basic ChartJS 3 wrapper for Vue3

For ChartJS 2, see v0.3.0

Requirements

Vue 3
ChartJS 3

Installation

yarn add chart.js @j-t-mcc/vue3-chartjs

npm install chart.js @j-t-mcc/vue3-chartjs

Configuration

Component props use the same structure as ChartJS arguments and are passed as-is to the instance of ChartJS.

ChartJS charts are responsive by default. If you wish to have a fixed sized chart, you can set the optional height and width properties, paired with setting responsive to false in the options property.

  props: {
    type: {
      type: String, 
      required: true
    },
    height: {
      type: Number,
      required: false,
      default: null
    },
    width: {
      type: Number,
      required: false,
      default: null
    },
    data: {
      type: Object,
      required: true
    },
    options: {
      type: Object,
      default: () => ({})
    },
    plugins: {
      type: Array,
      default: () => []
    }
  }

Sandbox Examples

View the ChartJS Docs for more examples.

Events

A default event hook plugin is injected into each chart object and emits the following events: ChartJS events

Event listeners are converted to camelcase in Vue 3. Events marked as "cancellable" in the ChartJS documentation can be " canceled" by calling the preventDefault method on the event parameter available in your event function.

Methods

This library only implements a few ChartJS methods for some common interactions and are available by reference:

chartRef.value.update(animationSpeed = 750)
chartRef.value.resize()
chartRef.value.destroy()

If you require additional access to ChartJS functionality, you can interact directly with the ChartJS object via the chartJSState attribute by reference:

const base64Image = chartRef.value.chartJSState.chart.toBase64Image()

See the ChartJS Docs for more

Examples

Below are some basic chart examples to get started.

Simple Chart

<template>
  <div style="height:600px;width: 600px; display: flex;flex-direction:column;">
    <vue3-chart-js
        :id="doughnutChart.id"
        :type="doughnutChart.type"
        :data="doughnutChart.data"
        @before-render="beforeRenderLogic"
    ></vue3-chart-js>
  </div>
</template>

<script>
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  setup () {
    const doughnutChart = {
      id: 'doughnut',
      type: 'doughnut',
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              '#00D8FF',
              '#DD1B16'
            ],
            data: [40, 20, 80, 10]
          }
        ]
      }
    }

    const beforeRenderLogic = (event) => {
      //...
      //if(a === b) {
      //  event.preventDefault()
      //}
    }

    return {
      doughnutChart,
      beforeRenderLogic
    }
  },
}
</script>

Updating chart

Here is an example of updating the data, labels and title in a chart.

See the ChartJS docs for more details on updating charts.

<template>
  <div style="height:600px;width: 600px;display: flex;flex-direction:column;">
    <vue3-chart-js
        :id="doughnutChart.id"
        ref="chartRef"
        :type="doughnutChart.type"
        :data="doughnutChart.data"
        :options="doughnutChart.options"
    ></vue3-chart-js>

    <button @click="updateChart">Update Chart</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  setup () {
    const chartRef = ref(null)

    const doughnutChart = {
      id: 'doughnut',
      type: 'doughnut',
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              '#00D8FF',
              '#DD1B16'
            ],
            data: [40, 20, 80, 10]
          }
        ]
      },
      options: {
        plugins: {}
      }
    }

    const updateChart = () => {
      doughnutChart.options.plugins.title = {
        text: 'Updated Chart',
        display: true
      }
      doughnutChart.data.labels = ['Cats', 'Dogs', 'Hamsters', 'Dragons']
      doughnutChart.data.datasets = [
        {
          backgroundColor: [
            '#333333',
            '#E46651',
            '#00D8FF',
            '#DD1B16'
          ],
          data: [100, 20, 800, 20]
        }
      ]

      chartRef.value.update(250)
    }

    return {
      doughnutChart,
      updateChart,
      chartRef
    }
  },
}
</script>

Exporting Chart as PNG

<template>
  <div style="height:600px;width: 600px; display: flex;flex-direction:column;">
    <button type="submit" @click="exportChart">Export Chart as PNG</button>
    <vue3-chart-js
        :id="doughnutChart.id"
        ref="chartRef"
        :type="doughnutChart.type"
        :data="doughnutChart.data"
    ></vue3-chart-js>
  </div>
</template>

<script>
import { ref } from 'vue'
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  setup () {
    const chartRef = ref(null)
    const doughnutChart = {
      id: 'doughnut',
      type: 'doughnut',
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              '#00D8FF',
              '#DD1B16'
            ],
            data: [40, 20, 80, 10]
          }
        ]
      }
    }

    const exportChart = () => {
      let a = document.createElement('a')
      a.href = chartRef.value.chartJSState.chart.toBase64Image()
      a.download = 'image-export.png'
      a.click()
      a = null
    }

    return {
      chartRef,
      doughnutChart,
      exportChart
    }
  },
}
</script>

Adding a plugin

ChartJS has two different types of plugins: Global & Inline.

Inline plugins can be passed directly to the chart via the plugins array prop and will be available for that chart only.

Global plugins require registration with ChartJS and will be available for all charts. Some plugins must be registered.

Here is an example of adding a global plugin, in this case chartjs-plugin-zoom.

Global plugins can be registered one of two ways:

Via Component Install

import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
import zoomPlugin from 'chartjs-plugin-zoom'

const Vue = createApp(App)

Vue.use(Vue3ChartJs, {
  plugins: [
    zoomPlugin
  ]
})

Vue.mount('#app')

Via Helper Function

import Vue3ChartJs from '../lib/main'
import zoomPlugin from 'chartjs-plugin-zoom'

Vue3ChartJs.registerGlobalPlugins([zoomPlugin])

Example usage with locally imported chart component:

<template>
  <div style="height:600px;width:600px;">
    <vue3-chart-js
        :id="lineChart.id"
        :type="lineChart.type"
        :data="lineChart.data"
        :options="lineChart.options"
    ></vue3-chart-js>
  </div>
</template>

<script>
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
import zoomPlugin from 'chartjs-plugin-zoom'

Vue3ChartJs.registerGlobalPlugins([zoomPlugin])

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  setup () {
    const lineChart = {
      id: 'line',
      type: 'line',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [50, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        plugins: {
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
              },
              pinch: {
                enabled: true,
              },
              mode: "y",
            },
          },
        },
      },
    }

    return {
      lineChart
    }
  },
}
</script>

Demo

For a demo, Clone this repository and run:

yarn install

yarn dev

License

MIT

vue3-chartjs's People

Contributors

Stargazers

Watchers

vue3-chartjs's Issues

Multiple chartRefs did not work

I was trying to switch between four charts using v-if. Initially, I declared four charts in a div, and assign each of them a unique ref, but somehow only one of them worked.

Any suggestions? Thanks

TypeScript support

Can we expect TypeScript support anytime soon?

My project (as many others I assume) rely on TS and that would be great addition to the package itself with better completion.

*I have no experience in typing packages

How to set chart fixed height?

I want to make a fixed height bar chart .

This is the code :

<template>
  <h2>Bar Chart</h2>
  <div style="height: 700px">
    <vue3-chart-js v-bind="{ ...barChart }" />
  </div>
</template>

<script>
import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";

export default {
  name: "App",
  components: {
    Vue3ChartJs,
  },
  setup() {
    const barChart = {
      type: "bar",
      options: {
        min: 0,
        max: 100,
        responsive: true,
        plugins: {
          legend: {
            position: "top",
          },
        },
        scales: {
          y: {
            min: -100,
            max: 100,
            ticks: {
              callback: function (value) {
                return `${value}%`;
              },
            },
          },
        },
      },
      data: {
        labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
        datasets: [
          {
            label: "My First Dataset",
            backgroundColor: ["#1abc9c", "#f1c40f", "#2980b9", "#34495e"],
            data: [40, 20, 50, 10],
          },
          {
            label: "My Second Dataset",
            backgroundColor: ["#2ecc71", "#e67e22", "#9b59b6", "#bdc3c7"],
            data: [-40, -20, -10, -10],
          },
        ],
      },
    };

    return {
      barChart,
    };
  },
};
</script>

I already try to set the height to 700px

<div style="height: 700px">
  <vue3-chart-js v-bind="{ ...barChart }" />
</div>

But it's not working, chart height doesn't change at all.

How to set bar chart fixed height?

Updating options does not have effect after update

An update to the options object of a chart is not visible after calling chartRef.value.update().

Example

I added a title to the Updating chart example from the README. When the data is changed (in updateChart), the title is also changed but that does not have any effect.

<template>
  <div style="height:600px;width: 600px;display: flex;flex-direction:column;">
    <vue3-chart-js
        :id="doughnutChart.id"
        ref="chartRef"
        :type="doughnutChart.type"
        :data="doughnutChart.data"
        :options="doughnutChart.options"
    ></vue3-chart-js>

    <button @click="updateChart">Update Chart</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
  name: 'App',
  components: {
    Vue3ChartJs,
  },
  setup () {
    const chartRef = ref(null)

    const doughnutChart = {
      id: 'doughnut',
      type: 'doughnut',
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              '#00D8FF',
              '#DD1B16'
            ],
            data: [40, 20, 80, 10]
          }
        ]
      },
      options: {title: {text: 'foo', display: true}}
    }

    const updateChart = () => {
      doughnutChart.data.labels = ['Cats', 'Dogs', 'Hamsters', 'Dragons']
      doughnutChart.data.datasets = [
        {
          backgroundColor: [
            '#333333',
            '#E46651',
            '#00D8FF',
            '#DD1B16'
          ],
          data: [100, 20, 800, 20]
        }
      ]

      doughnutChart.options.title.text = 'bar';

      chartRef.value.update()
    }

    return {
      doughnutChart,
      updateChart,
      chartRef
    }
  },
}
</script>

Changing Font Family

Hi, I've been trying to change the font family for the labels and tooltips but it doesn't seem to be working.

Can you please help with the issue?

Here's the code for reference.

<template>
    <vue3-chart-js
    :type="chart.type"
    :data="chart.data"
    :options="chart.options"
    ></vue3-chart-js>
</template>

<script>
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs';

export default {
    name: 'SalesChart',
    components: {
        Vue3ChartJs,
    },
    data() {
        return {
            chart: {
                type: 'bar',
                options: {
                    legend: {
                        display: false,
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                maxTicksLimit: 10,
                                max: this.max,
                                min: 0,
                                fontFamily: "'lgc-bold'",
                                callback: (label) => {
                                    let n = Math.floor(Math.log10(label));
                                    switch(n) {
                                        case 3: return label != 0 ? label/1000+'k' : 0;
                                        case 6: return label != 0 ? label/1000000+'m' : 0;
                                        default: return label;
                                    }
                                }
                            },
                            gridLines: {
                                display: true,
                                drawBorder: true,
                                drawOnChartArea: false
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                fontFamily: "'lgc-bold'"
                            },
                            gridLines: {
                                display: true,
                                drawBorder: true,
                                drawOnChartArea: false
                            }
                        }]
                    },
                    tooltips: {
                        enabled: true,
                        displayColors: false,
                        backgroundColor: '#000000',
                        callbacks: {
                            label: (tooltipItem) => {
                                return 'AED ' + tooltipItem.yLabel*100;
                            }
                        },
                        titleFontFamily: "'lgc-bold'",
                        titleFontSize: 13,
                        bodyFontFamily: "'lgc-bold'",
                        bodyFontColor: '#63b879'
                    },
                },
                data: {
                    labels: ["VueJS", "EmberJS", "ReactJS", "AngularJS"],
                    datasets: [{
                        label: "My first datatest",
                        backgroundColor: ["#1abc9c", "#f1c40f", "#2980b9", "#34495e"],
                        data: [40003, 34444, 53330, 1022],
                    }]
                }
            }
        }
    }
}
</script>

Really strange behavior with vue-cli

I use vue-cli for my project. Firstly I though the problem is in my project but I gave your example and it doesn't work as well.

If I do npm run serve everything is ok. The charts are displayed. But if I do npm run build no errors in console but charts don't displayed. The only appears are axises.

vue3-chartjs-issue.tar.gz

Auto reset zoom after chart update

Updating the chart while using zoom or pan will reset zoom and pan.
Can the user update the chart while zooming and panning? (Of course, zoom and pan are not initialized.)

sample code
https://codesandbox.io/s/cool-water-86t54c?file=/src/App.vue:0-1839

Tooltip options not working

I'm trying to set tooltip options and use callbacks, and they aren't doing anything.

As you can see in the below code, I set the caret size to 0 pixels and also add a title callback. However, on my chart, the caret size stays normal and the callback is not run - "test" is not printed to the console, despite the console.log("test")

const chart = {
            id: 'chart',
            type: 'bubble',
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    caretSize: 0,
                    callbacks: {
                        title: (tooltipItem, data) => {
                            console.log("test");

                            let dataPoint = data["datasets"][tooltipItem["datasetIndex"]][tooltipItem["dataIndex"]];

                            let satelliteAName = dataPoint["satelliteA"]["OBJECT_NAME"];
                            let satelliteBName = dataPoint["satelliteB"]["OBJECT_NAME"];

                            return satelliteAName + " and " + satelliteBName;
                        },
                        label: (tooltipItem, data) => {},
                        afterLabel: (tooltipItem, data) => {},
                    },

                }
            },
            data: {
                datasets: [
                    {
                        label: 'Velocity < x',
                        data: conjunctionData,
                        backgroundColor: 'rgb(255, 99, 132)'
                    }
                ]
            }
        }

Does anyone know what might be happening?

How to change default aspect ratio of charts

@J-T-McC J-T-McC

Hi Tyson,

Is there a way to change the default aspect ratio of the rendered chart? I understand I can hard code the chart size using .value.resize(width, height), but most time its size should adjust along the container size. However, the rendered chart always keeps an aspect ratio of about 2:1.
Is there something I missed from your documents?

Also, it seems value.resize(width, height) isn't working either:

chartRef.value.resize(498, 373)  // this has no effect

Kind regards
Andy Liao

Error: Maximum recursive updates exceeded - watch chart data from props and trigger chartRef.value.update()

My idea is to let the chart update automatically when the data is updated.

It looks like chartRef.value.update() will trigger an update on the props chartdata object too and hence form a recursive loop:
The HTML template part remains the same as your sample.

    import { ref, watch } from "vue";
    import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";
    export default {
      components: {
        Vue3ChartJs,
      },
      props: ["chartid", "charttype", "chartdata"],
      setup(props) {
        const chartRef = ref(null);

        const doughnutChart = {
          id: props.chartid,
          type: props.charttype,
          data: props.chartdata,
          options: {},
        };
    
        watch(props.chartdata, () => {
          console.log("data has been changed");
          chartRef.value.update(250);
        });
    
        return {
          doughnutChart,
          chartRef,
        };
      },
    };

Colours / Options

Hi,
Thanks a lot for your work. I was trying to change colours of axes using options, but it doesn't seem to be working. Could you please post a piece of code that works? Just in case, I attached the code I was playing with.

<template>
  <div style="height: 300px; width: 300px; border: 1px solid #000111">
      <Vue3ChartsJS
        :id="lineChart.id"
        :type="lineChart.type"
        ref="chartRef"
        :data="lineChart.data"
        :options="lineChart.options"
      />
  </div>
  
</template>

<script>

import Vue3ChartsJS from '@j-t-mcc/vue3-chartjs';
import { ref } from 'vue';

export default {
    components: {
        Vue3ChartsJS,
    },
    setup() {  

        const chartRef = ref(null)

        const new_number = ref(null);
        const lineChart = {
            id: 'line-001',
            type: 'line',
            data: {
                labels: ["Vue", "A", "B", "C"],
                datasets: [
                    {
                        backgroundColor: 'rgb(255, 255, 255)',
                        borderColor: 'rgb(255, 255, 255)',
                        // backgroundColor: [
                        //     '#345321',
                        //     '#34ba31',
                        //     '#ffbcaa',
                        //     '#fdaaaa',
                        // ],
                        data: [40, 20, 80, 10],
                    },
                ],
                
            },
            options: {
                maintainAspectRatio: false,
                responsive:true,
                color: 'rgb(255, 255, 255)',
                scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: "Frequency (Hz)",
                        fontFamily: "Montserrat",
                        fontColor: "black",
                    },
                    ticks: {
                        fontColor: "green",
                        fontSize: 18,
                        stepSize: 1,
                        beginAtZero: true,
                        min: -10,
                        max: 120,
                    }
                }],
                xAxes: [{
                    ticks: {
                        fontColor: "purple",
                        fontSize: 14,
                        stepSize: 1,
                        beginAtZero: true
                    }
                }]
            }
                
            }
        }

        const update_Chart= () => {
            console.log("here")
            lineChart.data.labels.push("N");
            lineChart.data.datasets[0].data.push(parseInt(new_number.value));
            console.log(lineChart.data)
            chartRef.value.update(500);
        }

        return {
            lineChart, new_number, update_Chart, chartRef, primary_color
        }
    }

}
</script>

<style>

canvas {
   background-color: var(--q-primary)
}

</style>

Can not render horizontal bar chart

Hi, I have the issue! I can't render "horizontal bar" chart with "indexAxis": "y".

<template>
    <Vue3ChartJs
        ref="chartRef"
        :data="data"
        :styles="styles"
        v-bind="{...chart}" />
</template>

<script>
    import {reactive, computed, watch, ref, onMounted} from 'vue'
    import {useStore} from 'vuex'

    import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

    const CHART_ID = 'horizontal-bar'
    const CHART_TYPE = 'bar'
    const CHART_AXIS = 'y'
    const DEFAULT_TIME_UNIT = 'month'
    const TIMEOUT_FOR_MOUNT_HOOK = 1000

    export default {
        name: 'HorBarChart',
        components: {
            Vue3ChartJs,
        },
        props: {
            data: {
                type: Object,
                default: () => ({}),
            },
            styles: {
                type: Object,
                default: () => ({}),
            },
            displayColors: {
                type: Boolean,
                default: true,
            },
            zoomControl: {
                type: Boolean,
                default: true,
            },
            dateLabels: {
                type: Boolean,
                default: true,
            },
            xAxis: {
                type: Boolean,
                default: true,
            },
            labelControl: {
                type: Boolean,
                default: true,
            },
            timeUnit: {
                type: String,
                default: DEFAULT_TIME_UNIT,
            },
        },
        setup(props) {
            props = reactive(props)

            const store = useStore()

            const chartRef = ref(null)

            const chart = {
                id: CHART_ID,
                type: CHART_TYPE,
                options: {
                    indexAxis: CHART_AXIS,
                    plugins: {
                        legend: {
                            display: false,
                        },
                        title: false,
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: {
                        padding: {
                            left: -6,
                            right: 4,
                            top: 0,
                            bottom: 4,
                        },
                    },
                    pointBorderWidth: 0,
                    title: {
                        display: false,
                    },
                    tooltips: {
                        mode: 'point',
                        backgroundColor: store.state.defaults.colors.pallet[0],
                        caretPadding: 5,
                        xPadding: 10,
                        yPadding: 10,
                        titleMarginBottom: 8,
                        bodyFontSize: 12,
                        bodySpacing: 8,
                        multiKeyBackground: 'rgba(255,255,255,0.0)',
                        displayColors: props.displayColors,
                    },
                    elements: {
                        line: {
                            borderColor: 'rgba(0,0,0,0.1)',
                            borderWidth: 1,
                            backgroundColor: 'rgba(0,0,0,0.1)',
                        },
                    },
                    scales: {
                        showDatapoints: true,
                        y: {
                            gridLines: {
                                display: false,
                                drawBorder: false,
                                color: 'rgba(0, 0, 0, 0)',
                            },
                            ticks: {
                                display: false,
                                beginAtZero: true,
                            },
                            stacked: true,
                        },
                        x: {
                            gridLines: {
                                display: false,
                                drawBorder: false,
                                color: 'rgba(0, 0, 0, 0.05)',
                            },
                            ticks: {
                                display: props.xAxis,
                                beginAtZero: true,
                            },
                            stacked: true,
                        },
                    },
                },
            }

            const data = computed(() => {
                return window._.merge(chart.data, props.data)
            })

            watch(data, (newValue) => {
                if (!newValue) return

                chartRef.value.update()
            })

            const mount = () => {
                setTimeout(() => {
                    chartRef.value.update()
                }, TIMEOUT_FOR_MOUNT_HOOK)
            }

            onMounted(mount)

            return {
                chart,
                chartRef,
                data,
                mount,
            }
        },
    }
</script>

Chart.js v4 support

Can we expect Chart.js v4 support anytime soon?

Correct way to add plugins

Hey @J-T-McC, thanks for your work on this 💪

I'm trying to get chartjs-plugin-zoom working and I'm struggling.

v1

<template>
  <chart-base
    :id="chart.id"
    :type="chart.type"
    :data="chart.data"
    :options="chart.options"
    :plugins="chart.plugins"
  />
</template>

<script>

import { defineComponent } from 'vue'
import chartBase from '@j-t-mcc/vue3-chartjs'
import zoom as "chartjs-plugin-zoom";

export default defineComponent({
  components: {
    chartBase,
  },
  setup () {
    const chart = {
      id: 'line',
      type: 'line',
      data: {
        // same as your example
      },
      options: {},
      plugins:[{
        zoom: {
          pan: {
            enabled: true,
            mode: 'xy',
            overScaleMode: 'y'
          },
          zoom: {
            enabled: true,
            mode: 'xy',
            overScaleMode: 'y'
          }
        }
      }]
    }

    return {
      chart
    }
  },
})
</script>

v2

// same as above except adding plugin settings to options, and passing zoom to plugins prop.
      data: {
        // same as your example
      },
      options: {
        plugins: {
          zoom: {
            // plugin options here
          }
      },
      plugins: [zoom]
    }

Neither work (plugin functionality isn't apparent) and I get no errors to follow.

I appreciate it's most likely my code not working rather than a bug, however if you could clarify the correct usage I'd be happy to submit a PR to add the example to the docs to help future devs?

Sanity check: dependencies are installed

    "@j-t-mcc/vue3-chartjs": "^0.3.0",
    "chart.js": "^2.9.4",
    "chartjs-plugin-zoom": "^0.7.7",

Sandbox Examples Problem

I am learning Vue.

Sorry, my English is not good.

https://codesandbox.io/s/bar-chart-kog87?file=/src/App.vue

I would like to know what is this for?

options: {
    min: 0,
    max: 100,
}

Whether I delete or change the value, I don't see a difference.

Cannot read property 'Chart' of undefined

Hey, getting this error when including the umd build:

Cannot read property 'Chart' of undefined

I have included Chart.js and tested it is all loaded and working as expected before including vue3-chartjs. Am i wrong in thinking that i can use this by just including the file 'vue3-chartjs.umd.js' ?

can't change chart type

I'm attempting to change the chart type I display based on a user <select> input.

I update the data, type, and options props and then call chartRef.update(), but nothing happens.

I suppose this can be handled with a number of charts and some v-if's. But I thought this approach cleaner and was hopeful it could work.

Any suggestions?

[email protected] support

Hello, do you plan to support the [email protected] version?

I can't use your package with a more recent version of chart.js.

Thank you