How to use chartjs-gauge with vue-chartjs?

Question

I am using vue-chartjs in my Vue2 application. https://vue-chartjs.org/ I want to create a gauge chart and tried using chartjs-gauge library. https://www.npmjs.com/package/chartjs-gauge But I can't figure out how to use it with vue-chartjs.

Here is how i use the LineChart in my components:

<script>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js";
import { Line as LineChart } from "vue-chartjs";
import zoomPlugin from "chartjs-plugin-zoom";
import { eventBus } from "@/utils/event-bus";
import autocolors from "chartjs-plugin-autocolors";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  zoomPlugin,
  Filler,
  autocolors
);

export default {
  components: {
    LineChart,
  },
  props: {
    chartId: {
      type: String,
      default: "line-chart",
    },
    datasetIdKey: {
      type: String,
      default: "label",
    },
    width: {
      type: Number,
      default: 400,
    },
    selectedGrid: {
      type: Object,
    },
    height: {
      type: Number,
      default: 400,
    },
    cssClasses: {
      default: "",
      type: String,
    },
    styles: {
      type: Object,
      default: () => {},
    },
    plugins: {
      type: Array,
      default: () => [],
    },
    chartData: {
      type: Object,
      default: () => {},
      required: true,
    },
    chartOptions: {
      type: Object,
      default: () => {
        return {
          responsive: true,
          plugins: {
            zoom: {
              pan: {
                enabled: true,
                mode: "x",
                modifierKey: "ctrl",
              },
              zoom: {
                drag: {
                  enabled: true,
                },
                mode: "x",
              },
            },
            autocolors: {
              mode: "dataset",
            },
          },
        };
      },
      // required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    resetGraph() {
      const chartInstance = this.$refs.myChart;
      if (chartInstance) {
        this.$refs.myChart.$children[0].chart.resetZoom();

        eventBus.$emit("chart-zoom-reset", this.chartId);
      }
    },
    handleZoom({ chart }) {
      const { xAxisID, yAxisID } = chart.options.scales;
      const { left, right } = chart.chartArea;
      const { xMin, xMax, yMin, yMax } = chart.scales;
      const xRange = xMax - xMin;
      const yRange = yMax - yMin;
      const xMinNew = xMin + ((left - xMin) / (right - left)) * xRange;
      const xMaxNew = xMin + ((right - xMin) / (right - left)) * xRange;
      const yMinNew =
        yMin +
        ((chart.height - chart.chartArea.bottom) /
          (chart.chartArea.bottom - chart.chartArea.top)) *
          yRange;
      const yMaxNew =
        yMin +
        ((chart.height - chart.chartArea.top) /
          (chart.chartArea.bottom - chart.chartArea.top)) *
          yRange;
      chart.options.scales = {
        xAxisID: {
          ...xAxisID,
          min: xMinNew,
          max: xMaxNew,
        },
        yAxisID: {
          ...yAxisID,
          min: yMinNew,
          max: yMaxNew,
        },
      };
      chart.update();
    },
  },
  computed: {},
  mounted() {
    eventBus.$on("reset-zoom", (chartId) => {
      if (chartId && chartId === this.chartId) {
        this.resetGraph();
      }
    });
    eventBus.$on("grid-selected", () => {
      const chartInstance = this.$refs.myChart;
      if (chartInstance) {
        this.$refs.myChart.$children[0].chart.resize();
      }
    });
  },
  beforeDestroy() {
    eventBus.$off("reset-zoom", this.resetGraph);
    eventBus.$off("grid-selected");
  },
};
</script>

<template>
  <div class="chart-container">
    <div class="chart-container-body">
      <LineChart
        :data="chartData"
        :options="chartOptions"
        :plugins="plugins"
        ref="myChart"
        id="myChart"
        @zoom="handleZoom"
      />
    </div>
  </div>
</template>

So my questions is how can i use the same approach in my vue component to include the chartjs-gauge Gauge component.

Answer 1

Turns out that chartjs-gauge is deprecated and doesn't support newer chart.js versions. https://github.com/apertureless/vue-chartjs/issues/1081#issuecomment-1910537780