j-t-mcc / vue3-chartjs Goto Github PK
View Code? Open in Web Editor NEWVue3 wrapper for ChartJS
License: MIT License
vue3-chartjs's People
Contributors
Stargazers
Watchers
Forkers
trendingtechnology massimiliano76 abordin marcelofloriano katexue bkoplin uchchhas pathscale bkearns janggoon235 trancedevcode madhupolu 4yourcompany lley01 leelenaleee yicheng55 vflorian2000 creedofcool devtaeseung logan-zh lassekau als24 bennet-esyoilvue3-chartjs's Issues
[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
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>
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
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' ?
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.)
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>
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?
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.
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
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?
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
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",
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>
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.
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?
Chart.js v4 support
Can we expect Chart.js v4 support anytime soon?
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>
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,
};
},
};
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.