I am attempting to install chartjs-plugin-datalabels. I am using vue-chartjs and need to include the plugin for datalabels (if anyone can recommend anything else itd be much appreciated.)
my current versions for everything is
chart.js#3.8.0
vue-chartjs#3.5.1
vue#2.6.14
he is my code for reference:
<script>
import { Bar, mixins } from "vue-chartjs";
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(ChartDataLabels);
export default {
extends: Bar,
props: ["options"],
mixins: [mixins.reactiveProp],
mounted() {
this.renderChart(this.chartData, this.options);
},
};
</script>
My issue:
after downloading chartjs-plugin-datalabels, none of my charts work anymore. I'm now getting these errors when I load my page:
I have a feeling the issue is likely due to the versions and version requirements not aligning at the moment. Is there any way to solve this?
Additionally, If there is an alternative way to have something similar to datalabels that does not require plugins Id must prefer avoiding the headache of this plugin.
my required look is to have a doughnut chart with 2 datasets where one is presented as a number and the other as a %
i.e:
You are using incopatible versions of chart.js and vue-chart.js.
Vue-chart.js v3 only works with Chart.js V2.
For Chart.js V3 you need vue-chart.js V4.
Make sure that if you decide to update vue-chart.js to V4 to import everything from the 'vue-chartjs/legacy' package since you are using Vue V2 and not V3.
So then your import will look like this:
import { Bar } from 'vue-chartjs/legacy'
Related
Hi im getting this issue and can't quite figure why its saying it. im using vue3 with tailwind.
""export 'default' (imported as 'Chart') was not found in 'chart.js'"
Guess you are trying to import chart.js like this import Chart from 'chart.js', since chart.js v3 chart.js is treeshakable so you will have to import and register all the components you want to use or import and register everything with the auto import like this: import Chart from 'chart.js/auto'
Docs: https://www.chartjs.org/docs/master/getting-started/integration.html#bundlers-webpack-rollup-etc
For me, I just had to downgrade from chart.js#3.x to chart.js#2.9.4
I am trying to import a simple node js module into Ember js. I followed the quick start at https://guides.emberjs.com/v3.8.0/getting-started/quick-start/ and got the People List working.
Then I added the simple upper-case module using npm install upper-case and added app.import('node_modules/upper-case/upper-case.js'); to ember-cli-build.js as mentioned in https://guides.emberjs.com/release/addons-and-dependencies/managing-dependencies/.
After that, I opened scientists.js and added import to upper-case as follows:
import Route from '#ember/routing/route';
//import uc from 'upper-case';
export default Route.extend({
model() {
var arr = new Array();
arr[0] = 'Marie Curie'; // uc('Marie Curie');
arr[1] = 'Mae Jemison';
arr[2] = 'Albert Hofmann';
return arr;
}
});
If I remove the comments, it shows me a blank screen. If I use 'Marie Curie'.toUpperCase() it works, but I want to be able to import such node modules. How can I achieve this?
I have already tried exception while importing module in ember js and ember-auto-import, but they don't seem to work for me. The above method I tried seems to be simple and would be nice if it can work this way.
PS: I could make upper-case work in other JS frameworks such as React and Vue, so the module itself doesn't have any issues.
if you install ember-auto-import, you'll be able to use any npm package like how the particular npm package's documentation says to use it (provided the particular npm package is configured correctly on build).
https://github.com/ef4/ember-auto-import
This'll be a default soon (and is recommended over using app.import)
The reason ember-auto-import is recommended over app.import is because there are ~ 5 different module formats JS can exist in, and you need to worry about those when using app.import. ember-auto-import, powered by webpack, abstracts all that away from you.
fwiw, JS has .toUpperCase() built in: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
so you don't need that particular module.
Edit
I have already tried exception while importing module in ember js and ember-auto-import, but they don't seem to work for me. The above method I tried seems to be simple and would be nice if it can work this way.
did you get any errors with this?
I'm developing an Ember-JS application with a lot of JavaScript that performs of all kind of UX and styling tasks.
Because these tasks fall out of the scope the MVC-logic, I've put them into modules that I put in the vendor map.
Putting them into the Vendor folder doesn't mean I'm done tweaking these files, but to test them, I'm required to re-start the ember-server over and over again.
How can I make Ember watch these JS-files in my vendor folder and re-compile them when I change them?
The following page answers for Ember v. 1, but doesn't apply to Ember 2.0: https://discuss.emberjs.com/t/solved-watch-addon-directory-for-changes/6410/4
I also tried creating an addon, but ember (cli) answers with: “You cannot use the addon command inside an ember-cli project.”
It took me a while to connect all the pieces of information scattered over internet, but using #Lux 's anwers, this is what I found out.
1) Using the ember-cli, I generate a 'utility' (hence the utils folder):
ember g util grid-layout
This gives you a JS-file “app/utils/grid-layout.js” template to fill in. In my case, it was a matter of…
2) copy-paste the body of the function I created earlier, into the body of the function that ember-cli came up with:
export default function gridLayout(tree) {
…
return tree
}
3) Importing the function in the controller, in my case controllers/index.js. I found different examples on how to do this, with and without curly braces and using different paths to the module file, but this is what made it work for me:
import Ember from "ember";
import gridLayout from "../utils/grid-layout";
export default Ember.Controller.extend({…
Links:
https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/export
https://blog.abuiles.com/blog/2014/10/03/working-with-javascript-plugins-in-ember-cli/
In ember-cli version 2.11.0 by default its watching vendor foler.
https://github.com/ember-cli/ember-cli/pull/6436
I am learning Ember and have been watching the Microsoft videos at the following URL. https://mva.microsoft.com/en-us/training-courses/creating-web-applications-with-ember-15692?l=0mGK6g00B_7405244527
I was making good progress until the generated Models and ended up with import DS from and then I read a post and found out that is the new behavior. I was able to modify the model code accordingly and get mine to work. Phew...
I then hit around 7:00 into the above video when they start to implement Ember-localstorage-adapter and the Git instructions are completely different than whats on Git today even though the version is the same. I only have the two models and when I look at the git page for the adapter I see this:
// app/serializers/application.js
import { LSSerializer } from 'ember-localstorage-adapter';
export default LSSerializer.extend();
// app/adapters/application.js
import LSAdapter from 'ember-localstorage-adapter';
export default LSAdapter.extend({
namespace: 'yournamespace'
});
I don't have app/serializers or adapters so I'm totally lost.
I'm really hoping I don't have to abort this video as there aren't really any other up-to-date videos out there on Ember. I've tried a bunch of others and they were dated or ill-suited for a beginner such as myself.
Thanks for the help!
I don't have app/serializers or adapters so I'm totally lost.
Just generate them using:
ember g serializer application
ember g adapter application
And then copy content from whatever page you check to see if everything's up to date to these files.
Am quite new to emberjs and ember-cli.
And I have always been wondering how a statement like this works:
import Ember from 'ember'
Does 'ember build' look up for 'ember' in node_modules?
I understand statements like this with relative paths:
import ENV from './config/environment'
but not the ones referred without a path.
This question raises in connection with Could not find module ember-validations, in an effort to find its root cause.
The sort answer is that Ember-CLI registers the global objects directly with the module system. Take a look at the code here. While it's wrapped in a little helper code, they essentially do this:
define('ember', [], function() {
return {
'default': window.Ember,
};
});
Then, Ember-CLI converts your import statement during compilation:
import Ember from 'ember';
Gets converted to:
var Ember = require('ember')['default'];
Keep in mind that this is how it's done when using a transpiler to use AMD modules. I'm not 100% sure how that code would work if we were using a native ES6 implementation, although I know that the syntax supports this kind of thing.