📊 Vue.js wrapper for Chart.js

Jakub

Last update: Jan 7, 2023

Overview

vue-chartjs

vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.

Demo & Docs

📺 Demo
📖 Docs

Compatibility

v1 later @legacy
- Vue.js 1.x
v2 later
- Vue.js 2.x

After the final release of vue.js 2, you also get the v2 by default if you install vue-chartjs over npm. No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag. If you're looking for v1 check this branch

Install

yarn install: yarn add vue-chartjs [email protected]
npm install: npm install vue-chartjs [email protected]

Or if you want to use it directly in the browser add

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>

to your scripts. See Codepen

Browser

You can use vue-chartjs directly in the browser without any build setup. Like in this codepen. For this case, please use the vue-chartjs.min.js which is the minified version. You also need to add the Chart.js CDN script.

You can then simply register your component:

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
})

How to use

You need to import the component and then either use extends or mixins and add it.

You can import the whole package or each module individual.

import VueCharts from 'vue-chartjs'
import { Bar, Line } from 'vue-chartjs'

Just create your own component.

// CommitChart.js
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
}

or in TypeScript

// CommitChart.ts
import { Component, Mixins } from 'vue-property-decorator'
import { Bar, mixins } from 'vue-chartjs';
import { Component } from 'vue-property-decorator';

@Component({
    extends: Bar, // this is important to add the functionality to your component
    mixins: [mixins.reactiveProp]
})
export default class CommitChart extends Mixins(mixins.reactiveProp, Bar) {
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
}

Then simply import and use your own extended component and use it like a normal vue component

import CommitChart from 'path/to/component/CommitChart'

Another Example with options

You can overwrite the default chart options. Just pass the options object as a second parameter to the render method

// MonthlyIncome.vue
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
}

Use it in your vue app

import MonthlyIncome from 'path/to/component/MonthlyIncome'

<template>
  <monthly-income :data={....} />
</template>

<script>
export default {
  components: { MonthlyIncome },
  ....
}
</script>

Reactivity

Chart.js does not update or re-render the chart if new data is passed. However, you can simply implement this on your own or use one of the two mixins which are included.

reactiveProp
reactiveData

Both are included in the mixins module.

The mixins automatically create chartData as a prop or data. And add a watcher. If data has changed, the chart will update. However, keep in mind the limitations of vue and javascript for mutations on arrays and objects. It is important that you pass your options in a local variable named options! The reason is that if the mixin re-renders the chart it calls this.renderChart(this.chartData, this.options) so don't pass in the options object directly or it will be ignored.

More info here

// MonthlyIncome.js
import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

Mixins module

The mixins module is included in the VueCharts module and as a separate module. Some ways to import them:

// Load complete module with all charts
import VueCharts from 'vue-chartjs'

export default {
  extends: VueCharts.Line,
  mixins: [VueCharts.mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

// Load separate modules
import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

// Load separate modules with destructure assign
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

Single File Components

You can create your components in Vues single file components. However it is important that you do not have the <template></template> included. Because Vue can't merge templates. And the template is included in the mixin. If you leave the template tag in your component, it will overwrite the one which comes from the base chart and you will have a blank screen.

Available Charts

Bar Chart

Line Chart

Doughnut

Pie

Radar

Polar Area

Bubble

Scatter

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run all tests
npm test

For a detailed explanation of how things work, check out the guide and docs for vue-loader.

Contributing

Fork it ( https://github.com/apertureless/vue-chartjs/fork )
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create a new Pull Request

License

This software is distributed under MIT license.

Comments

Rerender when data has changed

Hi! I am using the next branch.

I was wondering how I can make my charts reactive to the data that I enter through the :data property.

So, what should I do to re-render/update a graph?

Edit: And I do know that the data has changed. I can see that through Vue Devtools. So the new data is reactiv to the inside of my chart component. But there graph does not update when the new data arrives.
☂ feature-request ☕ discuss Hacktoberfest

opened by blomdahldaniel 39
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
Expected Behavior

The values in the chart should be changed without any errors.

I mean this code: http://vue-chartjs.org/#/home?id=reactive-data

Actual Behavior

The chart is initialized. The values are displayed. After pressing the button, the values change.

But in the logs of the browser, this errors always appears:

[Vue warn]: $attrs is readonly.

And second:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData"

My code is exactly the same as your code in the documentation. I did not specifically change it.

Environment

vue.js version: 2.4.1

vue-chart.js version: 2.7.1

npm version: 5.3.0 (but I use yarn)

yarn version: 0.27.5

✍ help wanted Need Repo
opened by afuno 36
[Typescript + vue-class style components] Argument of type 'typeof UsageChart' is not assignable to parameter of type 'VueClass'
Hello. I'm having an issue using the typescript sample that's in the docs. The compiler complains about types. Any ideas how can I fix this?

The code:

Full error:

Argument of type 'typeof UsageChart' is not assignable to parameter of type 'VueClass<Vue>'. Type 'typeof UsageChart' is not assignable to type 'VueConstructor<Vue>'. Types of parameters 'options' and 'options' are incompatible. Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, Line, object, object, never> | undefined'. Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, Line, object, object, never>'. Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ComponentOptions<Vue, DataDef<Line, Record<never, any>, Vue>, object, object, never[], Record<never, any>>'. Type 'DefaultData<Vue>' is not assignable to type 'DataDef<Line, Record<never, any>, Vue>'. Type 'object' is not assignable to type 'DataDef<Line, Record<never, any>, Vue>'. Type 'object' is not assignable to type '(this: Readonly<Record<never, any>> & Vue) => Line'. Type '{}' provides no match for the signature '(this: Readonly<Record<never, any>> & Vue): Line'.ts(2345)

Environment

vue.js version: 2.6.8

vue-chart.js version: 3.4.2

npm version: 6.8.0

✍ help wanted ❓ question
opened by santiagogdo 26
Request to have a Typescript Sample?
It would be really nice to have a typescript sample. Having hard time rendering the chart using typescript and vue-chartjs

Environment

vue.js version: <2.5>

vue-chart.js version: <3.2.1>

npm version: <5.5.1>

✍ help wanted ❓ question
opened by jayalakshmis 26
Computed object won't populate chart
Expected Behavior

Passing a prop array and computing a data value from it to populate a chart should work.

Actual Behavior

Empty chart.

Looking in vue console tools, I see that my computed object is present and (seemingly) valid:

actionbarlabels:Object datasets:Object data:Array[4] 0:4 1:1 2:2 3:1 labels:Array[4] 0:"call" 1:"join" 2:"attend meeting" 3:"attend march

And my template code looks like this: <bar-chart :data="actionbarlabels" :options="{responsive: true, maintainAspectRatio: false}"></bar-chart>

Environment

vue.js version: 2.3.4

vue-chart.js version: 2.8.2

npm version: 4.2.0

quasar version: 0.14.0

❓ question Need Repo
opened by ssuess 19

Mixins don't seem to trigger a refresh of the chart

Expected Behavior

Adding a label and value to the dataset should add the item to the chart

Actual Behavior

Adding a label and value to the data doesn't change the chart. The chart only gets redrawn when I resize the browser

Line chart:

import { Line, mixins } from 'vue-chartjs'

export default Line.extend({
  props: ["options", "chartData"],
  mixins: [mixins.reactiveProp],
  mounted () {
    this.renderChart(this.chartData,this.options);
    this._chart.update();
  },
})

Component:

<template>
    <div class="charts">
      <div class="col-md-12">
        <line-chart :chart-data="chartData" :options="chartOptions"></line-chart>
        <md-button @click.native="addData">add data</md-button>
      </div>
    </div>
</template>
<style scoped>
</style>
<script>
import lineChart from './chartOverviewTimeline.js';

export default {
    name: 'chartDashboard',
    components : {
        lineChart
    },
    data: function () {
        return {
          chartData : {},
          chartOptions : {mainAspectRatio : false}

        }
    },
    mounted(){
      this.prepareChartData();
    },
    methods: {
      addData: function(){
      for(let i = 0 ; i < 1; i ++){
          this.chartData.labels.push(100 + i);
          this.chartData.datasets[0].data.push(Math.random() * 100);
        }
      },
      prepareChartData(){
        this.chartOptions = {
          maintainAspectRatio:false,
          scaleShowHorizontalLines : true,
          scales: {
            xAxes: [{
              stacked: false
            }],
            yAxes: [{
              stacked: false,
              gridLines:{
                display: true
              }
            }]
          }
        };
        this.chartData = {
          labels:[],
          datasets:[
            {
              label: 'Sensor 1',
              backgroundColor: '#734375',
              data: [],
              fill: false,
              lineTension: 0
            }]
        };
        for(let i = 0 ; i < 5; i++){
          this.chartData.labels.push(i);
          this.chartData.datasets[0].data.push(Math.random() * 100);
        }
      }
    }    
}
</script>

I would expect that the addData function triggers a change in the prop and therefor a redraw in the chart.

Vue chartjs version 2.3.7

⚠️️ bug ✍ help wanted

opened by berendberendsen 19

Conditional Rendering Issue

<template v-if="!loaded">
      <line-chart
        :chart-data="[1, 2, 3, 4, 5]"
        :chart-labels="['00-00-0000', '00-00-0000', '00-00-0000', '00-00-0000', '00-00-0000',]"
      />
</template>

<template v-if="loaded">
      <line-chart
        :chart-data="chartData"
        :chart-labels="chartLabels"
      />
</template>

Expected Behavior

Render the first set of placeholder data while loading data then show the other chart with the actualy data after loading.

Actual Behavior

Doesn't follow the v-else condition, it just keeps the dummy data.

My only work around was by doing

<div>
    <line-chart
       v-if="!loaded"
        :chart-data="[1, 2, 3, 4, 5]"
        :chart-labels="['00-00-0000', '00-00-0000', '00-00-0000', '00-00-0000', '00-00-0000',]"
     />
</div>

<div>
    <line-chart
       v-if="loaded"
        :chart-data="chartData"
        :chart-labels="chartLabels"
    />
</div>

Environment

vue.js version: 2
vue-chart.js version: ^3.5.1
chart.js version: ^2.9.4
npm version: 7.19.1

opened by sell 18

Standalone chartjs build (don't include moment.js)
Expected Behavior

Moment.js shouldn't be included

Actual Behavior

Moment.js appears on my package.lock file and gets bundled in my build

Environment

vue.js version: 2.3.3

vue-chart.js version: 2.6.0

npm version: 5.0.3

webpack: 2.5.1

Can you help me figure out how I configure this correctly so that I only get the standalone chart.js build: https://github.com/chartjs/Chart.js/blob/3e94b9431a5b3d6e4bfbfd6a2339a350999b3292/docs/getting-started/installation.md . Moment.js is a very heavy package and if I can avoid including it in my site I'll gladly do that. The documentation makes it sound like treeshaking can do this but I'm just using the vue webpack cli and it's still coming through.

Thanks
opened by CalebKester 16
Uncaught TypeError: Cannot read property 'transition' of null

Hi @apertureless I am using this package for my data viz platform. The pie chart on load does not show but gives the error message Uncaught TypeError: Cannot read property 'transition' of null in my console. But when I try to click another chart, the chart comes up. What it this transition property? and how can I solve the problem?
❓ question Need Repo

opened by nwaughachukwuma 15
Loading data from server and displaying
Expected Behavior

In the example for Reactive Data in the docs, when implemented, you have to click the "Randomize" button to trigger the fillData function and get content displayed in the graph.

Actual Behavior

I'm looking for a way (as I serve the content to display from an API) to display the data as soon as the component gets a response from my API.

I tried to do the usual Vue 2.0 nextTick to call the fillData function when the component is mounted

mounted () { this.$nextTick(function () { this.fillData; }) },

Below is the code of my component (slightly adapted to match my API call), of course it works perfectly when I click the "Randomize" button but I don't want to have to click this button for each and every graph in my "Dashboard" component (several graphs in this component).

<template> <div> <line-chart :chart-data="datacollection"></line-chart> <button @click="fillData()">Randomize</button> </div> </template> <script> import LineChart from './LineChart.js' export default { components: { LineChart }, data () { return { datacollection: null } }, mounted () { this.$nextTick(function () { this.fillData; }) }, methods: { fillData () { this.$http.get('/api/data/line/scenarios_by_day') .then(response => { this.datacollection = response.data; }); }, } } </script>

Thank you in advance for your help !

Environment

vue.js version:

vue-chart.js version:

npm version:

❓ question
opened by cdubant 15
📝 Translate documentation
Would need some help with the translation of the docs. I will soon translate it into german. However I think chinese would be also great, as there is a big vue community there.

Simply check out docute and submit a PR ;) And please pick the right README in the /docs folder

Lanuages

[ ] German

[x] Chinese

[x] Japanese

[x] Indonesian

[x] Brazilian Portuguese

[x] Russian

[x] French

[ ] ???

⚡ feature ✍ help wanted Hacktoberfest documentation
opened by apertureless 15
[Bug]: Uncaught Error: Cannot find module 'vue-chartjs'
Would you like to work on a fix?

[ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I am trying to use this library migrating from vue-chartjs-3. Followed the migrating doc but nothing happens except for the error

<template> <Line v-if="chartData" ref="chartRef" :data="chartData" :options="options" /> </template> <script> import { defineComponent, ref } from "vue"; import { Line } from 'vue-chartjs'; import { Chart, registerables } from "chart.js"; import { useStore } from "vuex"; import ChartDataLabels from "chartjs-plugin-datalabels"; ......

Reproduction

I don't think I can provide such a repo

chart.js version

4.1.1

vue-chartjs version

5.1.0

Possible solution

No idea to be honest. I already tried the migration thing to use it but I haven't made it yet!
opened by jquirogaa 2
chore(deps): update dependency eslint to v8.31.0
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint (source) | 8.30.0 -> 8.31.0 | | | | |

Release Notes

eslint/eslint

v8.31.0

Compare Source

Features

52c7c73 feat: check assignment patterns in no-underscore-dangle (#16693) (Milos Djermanovic)

b401cde feat: add options to check destructuring in no-underscore-dangle (#16006) (Morten Kaltoft)

30d0daf feat: group properties with values in parentheses in key-spacing (#16677) (Francesco Trotta)

Bug Fixes

35439f1 fix: correct syntax error in prefer-arrow-callback autofix (#16722) (Francesco Trotta)

87b2470 fix: new instance of FlatESLint should load latest config file version (#16608) (Milos Djermanovic)

Documentation

4339dc4 docs: Update README (GitHub Actions Bot)

4e4049c docs: optimize code block structure (#16669) (Sam Chen)

54a7ade docs: do not escape code blocks of formatters examples (#16719) (Sam Chen)

e5ecfef docs: Add function call example for no-undefined (#16712) (Elliot Huffman)

a3262f0 docs: Add mastodon link (#16638) (Amaresh S M)

a14ccf9 docs: clarify files property (#16709) (Sam Chen)

3b29eb1 docs: fix npm link (#16710) (Abdullah Osama)

a638673 docs: fix search bar focus on Esc (#16700) (Shanmughapriyan S)

f62b722 docs: country flag missing in windows (#16698) (Shanmughapriyan S)

4d27ec6 docs: display zh-hans in the docs language switcher (#16686) (Percy Ma)

8bda20e docs: remove manually maintained anchors (#16685) (Percy Ma)

b68440f docs: User Guide Getting Started expansion (#16596) (Ben Perlmutter)

Chores

65d4e24 chore: Upgrade @eslint/eslintrc @1.4.1 (#16729) (Brandon Mills)

8d93081 chore: fix CI failure (#16721) (Sam Chen)

8f17247 chore: Set up automatic updating of README (#16717) (Nicholas C. Zakas)

4cd87cb ci: bump actions/stale from 6 to 7 (#16713) (dependabot[bot])

fd20c75 chore: sort package.json scripts in alphabetical order (#16705) (Darius Dzien)

10a5c78 chore: update ignore patterns in eslint.config.js (#16678) (Milos Djermanovic)

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.
opened by renovate[bot] 1
[Bug]: Cannot import `vue-chartjs`
Would you like to work on a fix?

[ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I'm trying to import vue-chartjs on a Vue 2 project (2.7.14) via PNPM, yet it gives me an error:

Module not found: Error: Can't resolve 'vue-chartjs' in <component name>

Note that when I tried to remove it and keep the import of chart.js, the error disappeared, which suggests that it has to do with the import statement of vue-chartjs My repo is CommonJS, in case that matters

Reproduction

I don't know the exact steps. The repo is my website which I'd like to keep private

chart.js version

3.7.1

vue-chartjs version

5.1.0

Possible solution

No response
opened by avi12 4
[Bug]: 'chartData' is declared here
Would you like to work on a fix?

[ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

So, I don't know why, but when I tried using any kind of chart, my Vue 3 + Vite show me this errors.

Reproduction

Create a simples version of Vue 3 + Vite, and try use vue-chartjs

chart.js version

v4.1.1

vue-chartjs version

v5.1.0

Possible solution

No response
Need Repo
opened by bkawakami 2
chore(deps): update vitest monorepo to ^0.26.0
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @vitest/coverage-c8 | ^0.25.8 -> ^0.26.0 | | | | | | vitest | ^0.25.8 -> ^0.26.0 | | | | |

Release Notes

vitest-dev/vitest

v0.26.3

Compare Source

   🚀 Features

mock: Expose a importOriginal helper to the factory - by @antfu in https://github.com/vitest-dev/vitest/issues/2551 (853ee)

   🐞 Bug Fixes

Correctly automock nested interoped defaults - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2559 (a431d)

Start tracking module resolution as soon as possible for easier tracking - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2560 (9f41e)

Don't hang when mocking module with circular dependency - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2572 (c479d)

Show list of tests when typechecking - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2585 (32a57)

api: Make api parse error stacks and return sourcePos in onTaskUpdate - by @adrienbaron in https://github.com/vitest-dev/vitest/issues/2563 (ef77d)

coverage: Env-replacer to remove query params from sourcemaps filenames - by @AriPerkkio in https://github.com/vitest-dev/vitest/issues/2584 (dba13)

    View changes on GitHub

v0.26.2

Compare Source

   🚀 Features

Project name - by @antfu (84f98)

   🐞 Bug Fixes

Improve "isInternaRequest" check - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2541 (2bb9a)

Use correct word when printing "long-running" warning - by @simon-abbott in https://github.com/vitest-dev/vitest/issues/2546 (8dc1c)

Pass down diff options - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2545 (98c94)

cli: Respect inline config dir - by @antfu in https://github.com/vitest-dev/vitest/issues/2550 (f6b59)

    View changes on GitHub

v0.26.0

Compare Source

   🚨 Breaking Changes

vite-node: Rewrite how vite-node resolves id - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2463 (58ee8)

Correctly interop nested default for external and inlined modules - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2512 (084e9)

If your environment is node, Vitest will not resolve invalid named exports (exports that are on "default" property will not magically appear as named exports), unless deps.interopDefault is enabled, or dependency is in deps.inline. This change doesn't affect jsdom, happy-dom or edge environments.

web-worker: Make web-worker implementation more compatible with spec - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2431 (c3a63)

Messages are now cloned with structuredClone, if it's available, or fallbacks to a polyfill.

Added support for SharedWorker

   🚀 Features

Introduce a native way to set env and globals - by @sheremet-va in https://github.com/vitest-dev/vitest/issues/2515 (b114d)

Add html reporter based on Vitest UI - by @poyoho and @sheremet-va in https://github.com/vitest-dev/vitest/issues/2444 (b8f34)

If you have @vitest/ui installed, you can now use 'html' reporter to get a beautiful UI to view your test results, inspect module graph and read log messages.

   🐞 Bug Fixes

Allow assigning new hotContext - by @cometkim in https://github.com/vitest-dev/vitest/issues/2524 (b4c43)

    View changes on GitHub

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

[ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.
opened by renovate[bot] 1
[Bug]: TypeScript mismatch with time carthesian axis
Would you like to work on a fix?

[ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

First of all: the library itself works, the issue only concerns the format that vue-chartjs expects.

I'm building a small projects that displays data in 3 different graphs, and the project uses Vue 3 with typescript.

I use the Pie, (stacked vertical) Bars and Line. For both Line and Bars, I use time carthesian axis to show my data according to their creation date. However, it fails on build because chart-data expects the data attribute to be an array of numbers, but I give it the following format:

{ label: string, backgroundColor: string, data: { x: string, y: string, }[] }

The graphs display without trouble, but I get errors when building it because of this problem.

Reproduction

https://codesandbox.io/s/smoosh-shape-ug1dld

Check the file /src/components/barChart.ts line 94 for the issue.

chart.js version

3.9.1

vue-chartjs version

4.1.2

Possible solution

Allow both number[] and something such as {x: string, y: string}[] as possible parameters. Apologies, I'm not very fluent in TypeScript yet so I'm not really precise.
⚠️️ bug improvement
opened by Drillan767 4

Releases(v5.1.0)

v5.1.0(Dec 19, 2022)
Features

restore CommonJS bundle (#980) (1eb1ba7)

Source code(tar.gz)
Source code(zip)
v5.0.1(Dec 6, 2022)
Bug Fixes

fix compatability with Vue >=2.7 (#967) (742bf62)

Source code(tar.gz)
Source code(zip)
v5.0.0(Dec 5, 2022)
⚠ BREAKING CHANGES

package now is ESM-only, no CommonJS support

default export was removed, please use named exports

chart events were removed

div wrapper was removed, chartData prop was renamed to data, chartOptions prop was renamed to options, generateChart was renamed to createTypedChart

Vue.js < 2.7 is no longer supported.

Features

base Chart component (#958) (f3ecfb0)

drop Vue.js < 2.7 support (#947) (d1fbacc)

events utils (#963) (752407e)

fallthrough props to canvas (#955) (6675cb0)

updateMode prop (#962) (5bd9805)

upgrade Chart.js to v4 (#960) (7fd4ae4)

Source code(tar.gz)
Source code(zip)
v4.1.2(Sep 27, 2022)
Bug Fixes

legacy multiple annotations (#910) (2a20eb8)

Source code(tar.gz)
Source code(zip)
v4.1.1(May 27, 2022)
Bug Fixes

add type comment on Chart Objects (#825) (#860) (2311361)

Source code(tar.gz)
Source code(zip)
v4.1.0(May 10, 2022)
Features

add reactivity to options (#840) (6f8fa51)

legacy-charts: add typescript definitions for legacy charts (#839) (d937f80), closes #825

Source code(tar.gz)
Source code(zip)
v4.0.7(Apr 25, 2022)
Bug Fixes

legacy-charts: tune chartoptions type check (#821) (4409b98)

Source code(tar.gz)
Source code(zip)
v4.0.6(Apr 21, 2022)
Bug Fixes

legacycharts: Fix updating multiple reactive charts on one page, except when using the chartjs-plugin-annotation and Vue 2 simultaneously. (#818) (45cb362)

Source code(tar.gz)
Source code(zip)
v4.0.5(Apr 8, 2022)
Bug Fixes

legacy-charts: fix render multiple charts at one page (#803) (fe97040), closes #800 #801

Source code(tar.gz)
Source code(zip)
v4.0.4(Apr 1, 2022)
Bug Fixes

change legacy chart instance type (#789) (543774c), closes #782

Source code(tar.gz)
Source code(zip)
v4.0.3(Mar 29, 2022)
Bug Fixes

fix chart plugins type (#786) (65762c8), closes #782

Source code(tar.gz)
Source code(zip)
v4.0.2(Mar 28, 2022)
Bug Fixes

legacycharts: add missed export for legacy charts generateChart function (#784) (4b68ba1)

Source code(tar.gz)
Source code(zip)
v4.0.1(Mar 25, 2022)
Bug Fixes

change images source in readme (#779) (b77bd31)

Source code(tar.gz)
Source code(zip)
v4.0.0(Mar 25, 2022)
⚠ BREAKING CHANGES

migration to vue3

upgrade to Chart.js 3.0

Features

chart.js 3.0 support (#754) (baba8e3)

migration to vue3 (#755) (1104335)

typescript support (#757) (67e73a0)

vue2 legacy support (#771) (5c9a69c)

Source code(tar.gz)
Source code(zip)
v3.5.1(Aug 22, 2020)
3.5.1 (2020-08-22)

Bug Fixes

Fix typescript issue #614 (#621) (2901be4)

Source code(tar.gz)
Source code(zip)
v3.5.0(Nov 1, 2019)
3.5.0 (2019-11-01)

Bug Fixes

Fix type script definition for addPlugin method (#564) (3065d70)

Update chart.js peerDependency (a140f5a)

Features

typescript: Improve mixins type definitions (2a6eb7b)

typescript: Improve mixins type definitions (#514) (520faca)

Add @types/chart.js types in typescript definitions (#536) (22fb8d1)

enhance search on the documentation (3542b34)

Source code(tar.gz)
Source code(zip)
v3.4.2(Mar 18, 2019)
3.4.2 (2019-03-18)

Bug Fixes

Change peerDependency version of chart.js to include older versions (8c780d3)

Source code(tar.gz)
Source code(zip)
v3.4.1(Mar 18, 2019)
3.4.1 (2019-03-18)

Bug Fixes

reactive-mixins: Add prop type and default value (8762521)

Update peerDependencies (5b19efc), closes #489

Source code(tar.gz)
Source code(zip)
v3.4.0(Aug 4, 2018)
3.4.0 (2018-08-04)

Features

events: Add events to reactiveMixins (#389) (67e8e4d), closes #382

typescript: Add basic typescript definitions (184be5c), closes #376

ux: Add a wrapper around generateLegend (#390) (fc646d8)

ux: Add fake render method with error message (23ff90d), closes #380

Source code(tar.gz)
Source code(zip)
v3.3.2(Jun 18, 2018)
3.3.2 (2018-06-18)

Bug Fixes

babel: fix decorator error with new version of babel (2fe804b)

core: Delete old chart.js instance first (#375) (89a7cac)

mixins: Add condition to check if chart instance is present. (1fed8e7)

Docs

privacy: Remove GA from docs page (d2d944f)

Source code(tar.gz)
Source code(zip)
v3.3.1(Mar 26, 2018)
3.3.1 (2018-03-26)

Bug Fixes

release: Add exports to index (8341f94)

Source code(tar.gz)
Source code(zip)

v3.3.0(Mar 23, 2018)

Changelog

Bug Fixes

readme: Update paypal donate button (bfda218)

Features

charts: Export generateChart to create custom charts (50e5644)
docs: Update docs with custom chart example (3247a61)

👨‍🏫 Custom Charts

You can now extend Chart.js chart types and modify them or create new chart types.

// 1. Import Chart.js so you can use the global Chart object
import Chart from 'chart.js'
// 2. Import the `generateChart()` method to create the vue component.
import { generateChart } from 'vue-chartjs'

// 3. Extend on of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */})

// 4. Generate the vue-chartjs component
// First argument is the chart-id, second the chart type.
const CustomLine = generateChart('custom-line', 'LineWithLine')

// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.

export default {
  extends: CustomLine,
  mounted () {
    // ....
  }
}

see-heavy-aQYR1p8saOQla

Source code(tar.gz)
Source code(zip)

v3.2.1(Feb 12, 2018)
💉 Fixed

Breaking build #310

Source code(tar.gz)
Source code(zip)
v3.2.0(Feb 9, 2018)
Features

Refactor identical code #305 Thanks to @nickknissen

Add js sourcemaps for vue-chartjs.js and vue-chartjs.min.js

With the refactor vue-chartjs is even smaller now.

| File | Before | After | | ------------- | ------------- |------------- | | vue-chartjs.js | 15.9 KB | 11.9 KB | | vue-chartjs.min.js | 7.49 KB | 3.49 KB |
Source code(tar.gz)
Source code(zip)
v3.1.1(Feb 2, 2018)

Refactor

Big thanks to @nickknissen for #303 which DRY out the code of vue-chartjs and reduced the filesize! The gzipped version is now 2.25 KB

| File | Before | Now | gzip | ------------- | ------------- |------------- |------------- | | vue-chartjs.js | 26.7 KB | 15.9 KB | 4.03 KB | | vue-chartjs.min.js | 13 KB | 7.49 KB | 2.25 KB |
Source code(tar.gz)
Source code(zip)
v3.1.0(Jan 12, 2018)
Changes

🐞 Bug Fixes

mixins: Check for chartjs instance before rendering chart (39ff839), closes #288

⚡️ Features

charts: Remove default styling (ac5d4d8)

Source code(tar.gz)
Source code(zip)
v3.0.2(Nov 7, 2017)
Fixes

Fixed the unpkg target in package.json

Source code(tar.gz)
Source code(zip)
v3.0.1(Nov 6, 2017)
Dependency Cleanup

Updated to current babel packages which are scoped with @babel

Added @babel/preset-env to automatically polyfill

Removed old babel presets

Build Script

Now there are only two dist files

vue-chartjs.js

vue-chartjs.min.js

With the webpack external fix, there is no need for two different builds. Chart.js is defined as an external and peerDependency.

If you're using vue-chartjs with Webpack no actions are required. If you're using vue-chart in the browser you will need to add the Chart.js CDN script.
Source code(tar.gz)
Source code(zip)
v3.0.0(Oct 14, 2017)
💎 vue-chart.js v3

Finally version 3 of vue-chartjs is ready to 🚣 . We have some breaking changes, but they are easy to change!

✅ Removed Vue.extend() in the base components #201 ✅ Changed the private data from private instance to private data instance #182 ✅ Updated peerDependencies vue & chart.js

🔥 Breaking Changes!

🐣 Component creation

In v2 you were creating your own chart components by extending the base component like this:

import { Line } from 'vue-chartjs' export default Line.extend({ .... })

This was possible because the base components had a export default Vue.extend({}) in it. Which creates a subclass of the vue ctor. vue docs Because of this Vue needed to be included as a dependency and bundled into the package for the browser build.

This was causing a lot of confusing 😕 and also some weird errors #216, #151 and some more problems like increased bundle size and duplicated dependencies for browser build.

🔐 Chart instance

Like mentioned in #182 vue could possibly overwrite the private _chart variable as it is saved as an unprotected instance variable. Now it makes usage of vue's private data notation.

⬆ 📖 Upgrade Guide

🐣 Component creation

Create your components now with either extends or mixins :

import { Line } from 'vue-chartjs' export default { extends: Line, data () {...}, mounted () { .... } }

or

import { Line } from 'vue-chartjs' export default { mixins: [Line], data () {...}, mounted () { .... } }

🔐 Chart instance

Replace this._chart with this.$data._chart

Chart.js

Please also keep in mind the Chart.js 2.7.0 changes if you update your peerDependencies
Source code(tar.gz)
Source code(zip)
v2.8.7(Sep 16, 2017)
Updated peer dependencies

[email protected]

[email protected]

Source code(tar.gz)
Source code(zip)