Comments (1)
I've got it to work directly on browser using import map and esm.sh. All you have to do is adding few lines in the header.
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/[email protected]/dist/vue.esm-browser.js",
"chart.js": "https://esm.sh/[email protected]",
"vue-chartjs": "https://unpkg.com/[email protected]/dist/index.js"
}
}
</script>
Then use it inside <script type="module">
and it totally worked.
<div id="app">
<chart-bar v-bind:options="{responsive: true}" v-bind:data="{
labels: [ 'January', 'February', 'March' ],
datasets: [ { label: 'foo', data: [40, 20, 12] } ]
}"></chart-bar>
</div>
<script type="module">
import { createApp, ref } from 'vue';
import { Bar } from 'vue-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
const app = createApp({
components: { ChartBar: Bar },
});
app.mount('#app');
</script>
from vue-chartjs.
Related Issues (20)
- [Bug]: Read only issue while using vue-query HOT 3
- [Bug]: Reactive Data on Line Chart : can update a single value, cannot update the entire array HOT 2
- [Bug]: Options (parsing) not updating chart as expected HOT 1
- [Bug]: Error with package version HOT 2
- Mixed chart types support HOT 5
- [Bug]: vue-tsc reports type errors
- [Bug]: Rendering a chart with multiple y axes will display both datasets on the larger scale HOT 1
- [Bug]: Line data point can be of type string when using a timescale HOT 1
- different behaviour between chrome and firefox with same dataset
- [Bug]: Wrong typings for Bar component HOT 7
- a11y: support ARIA attributes, role and fallback content for canvas
- [Bug]: Incorrect animation on data change on two or more datasets in doughnut chart
- [Bug]: Tooltip references invalid element after chart data updates HOT 2
- [Bug]: Fill property is ignored in Line Chart HOT 1
- [Bug]: Dynamically updating a chart HOT 5
- [Bug]: Error: "category" is not a registered scale. HOT 1
- Seems like there is no way to use chartjs-gauge library with vue-chartjs. Is there a workaround? HOT 2
- [Bug]: Problem using vue-chartjs when imported as ESM module
- [Bug]: Type error for `Line` `options` with `chartjs-zoom-plugin` HOT 1
- Vue bar graph doesnt work on multiple versions[Bug]:
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-chartjs.