question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to change Chartjs type dynamically

See original GitHub issue

Expected Behavior

I wanna to define a vue component that include vue-chartjs. I want to define prop as chart-type that can be Line, Bar, etc like below code. In extend property I just add one chart type. What should I do? Do yo have any alternative solutions?

<my-chart chart-type="Line" :chart-data="datacollection" :option="options"></my-chart>

Thanks

Environment

  • vue.js version: 2.5.*
  • vue-chart.js version: 3.4.2
  • npm version: 6.4.1

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
aperturelesscommented, Jul 8, 2019

it is not possible.

0reactions
LeeLenaleeecommented, Sep 23, 2020

It does not reset on data changes and it does update the data dynamically in the chart. About that charts are not interchangeable that is kind of true indeed, if you make a pie chart from your line it is a useless chart but if you use the change to make a bar chart from a line (my use case) than it is a valid option since the data and setup is the same for both chart types.

So while it is not an ideal solution it is the closest to what satisfied my needs and maybe for others too

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chart.js: Dynamic Changing of Chart Type (Line to Bar as ...
Chart.js modifies the config object you pass in. Because of that you can not just change 'config.type'. You could go into the modified...
Read more >
Updating Charts - Chart.js
Scales can be updated separately without changing other options. To update the scales, pass in an object containing all the customization ...
Read more >
ChartJS - change chart type and randomize data - CodePen
Created this to showcase an easy way to change your ChartJS chart type through a select dropdown (hint: you need to destroy the...
Read more >
Dynamic swapping of chart.js - Laracasts
However, nothing changes when I do this. The line chart remains even though I destroy() the chart, change it's type, then re-create it....
Read more >
Overview – Updating chart options - CanvasJS.com
Creating dynamic charts · <!DOCTYPE HTML> · <html> · <head> · <script type = "text/javascript" > · window.onload = function () { ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found