Comments (5)
Hm, after looking for some other answers on Stackoverflow, I was able to generate a bar chart with line charts on top of it.
Example of my component:
<script setup>
import {Chart as ChartJS, Title, LineElement, PointElement, Tooltip, Legend, BarElement, CategoryScale,Filler, LinearScale} from 'chart.js'
import {Bar} from 'vue-chartjs'
import {computed, defineProps} from 'vue'
ChartJS.register(CategoryScale, PointElement, LineElement, LinearScale, BarElement, Title, Tooltip, Filler, Legend)
const props = defineProps({
labels: Array,
dataRange: Array,
dataTrend: Array,
dataAvg: Array,
})
const chartData = computed(() => {
return {
labels: props.labels,
datasets: [
{
type: 'line',
label: "Average ($)",
borderColor: "#004BA8",
backgroundColor: "#004BA8",
borderWidth: 2,
data: props.dataAvg,
tension: 0.1,
},
{
type: 'line',
label: "Trend ($)",
backgroundColor: "#E57A44",
borderColor: "#E57A44",
borderWidth: 2,
data: props.dataTrend,
tension: 0.1,
},
{
type: 'bar',
label: "Min - Max ($)",
data: props.dataRange,
backgroundColor: '#188145a8',
radius: props.labels.length > 30 ? 0 : 3,
},
]
}
})
const chartOptions = computed(() => {
return {
tooltips: {
mode: 'index',
intersect: true,
displayColors: false,
},
interaction: {
mode: 'index'
},
responsive: true,
title: {
display: true,
text: "Sale Price ($)"
},
scales: {
x: {
stacked: true,
time: {
// Luxon format string
tooltipFormat: 'DD T'
},
format: "HH mm",
title: {
display: true,
text: 'Date'
}
},
y: {
stacked: false,
title: {
display: true,
text: 'Cents per kg'
},
suggestedMin: 0,
suggestedMax: props.dataAvg.length > 0 ? Math.max(...props.dataAvg)+10 : 0
}
},
}
})
</script>
<template>
<Bar v-if="dataRange?.length" :data="chartData" :options="chartOptions"/>
</template>
Generates this (what I needed):
Im using:
"vue-chartjs": "^5.2.0",
"chart.js": "^4.4.0",
"vue": "^3.2.31",
from vue-chartjs.
Hm, after looking for some other answers on Stackoverflow, I was able to generate a bar chart with line charts on top of it
Such a brilliant answer! This example have to be included in documentation 🙏🏻
from vue-chartjs.
Thanks to the people above for figuring this out! However, type support is still needed and @raam86 's suggestion didn't work for me.
Here is my implementation where I have to use any
to get past the type fences.
Note: This also happens to be an example of using multiple axes
<template>
<Bar :data="chartData" :options="options" />
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { Bar } from "vue-chartjs";
const options = ref<any>({
scales: {
ybar: {
type: "linear",
position: "left",
},
yline: {
type: "linear",
position: "right",
},
},
});
const datasets = computed(() => {
let toPlot= [];
// This is the bar graph
toPlot.push({
label: <bar label>,
data: <bar data>,
yAxisID: "ybar",
});
// This is the line graph
toPlot.push({
type: "line",
label: <line label>,
data: <line data>,
yAxisID: "yline",
});
return toPlot;
});
// HERE I need to use `any` to be able to pass into the Bar :data prop
const chartData = computed<any>(() => {
return { labels: <my labels>, datasets: datasets.value };
});
</script>
from vue-chartjs.
Bumping this.
Is there any work arounds to do mixed chart types at the moment?
from vue-chartjs.
In case someone is stuck with typescript error:
like Type '{ labels: string[]; datasets: ({ data: number[]; label: string; backgroundColor: string; } | { label: string; data: number[]; type: string; pointStyle: string; pointRadius: number; borderColor: string; })[]; }' is not assignable to type 'ChartData<"bar", (number | [number, number] | null)[], unknown>'.
for type mismatch
you need to uncomment the "other" type declaration so if you are using only leave the "line" type for combining bar and line charts
let bar_dataset_obj = {
data: data,
label: 'Label',
// type: 'bar', //for mixed charts only the "other" type should be declared
// backgroundColor: '#85bb65' //for some reason other attributes do not work any longer on this object
}
let line_dataset_obj = {
label: 'Label',
data: data,
type: 'line' // this is the other 'type'
}
from vue-chartjs.
Related Issues (20)
- [Bug]: Options (parsing) not updating chart as expected HOT 1
- [Bug]: Error with package version HOT 2
- [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 2
- 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 3
- [Bug]: Fill property is ignored in Line Chart HOT 3
- [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]:
- [Bug]: error during Vue render: mounted hook undefined is not an object (evaluating 't.labels')
- [Bug]: Decimation is not applied HOT 1
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.