Would you like to work on this feature? <li clas

In case someone is stuck with type error: like Ty

Mixed chart types support about vue-chartjs HOT 5 OPEN

ActuallyHappening commented on August 18, 2024

Mixed chart types support

from vue-chartjs.

Comments (5)

palomamtnez commented on August 18, 2024 3

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.

mewforest commented on August 18, 2024 1

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.

wcheek commented on August 18, 2024 1

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.

palomamtnez commented on August 18, 2024

Bumping this.
Is there any work arounds to do mixed chart types at the moment?

from vue-chartjs.

raam86 commented on August 18, 2024

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.

Mixed chart types support about vue-chartjs HOT 5 OPEN

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent