CODEWITHSUNDEEP
typescriptvuejs3vue-chartjs
Ketrabkox
Ketrabkox

Reputation: 11

How to change axis color in vue-chartjs?

I don't know how to change the color of the axis. Maybe someone of you had a similar problem. The graph looks like the one in the picture. I don't know if this is a result of the fact that my graph is a time graph. I am writing in Vue 3. Code for this graph below.

enter image description here

<template>
  <Line id="my-chart-id" :options="chartOptions" :data="chartData" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Line } from "vue-chartjs";

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

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

export default defineComponent({
  components: { Line },
  data() {
    return {
      chartData: {
        labels: ["January", "February", "March"],
        datasets: [
          {
            data: [40, 20, 12],
            backgroundColor: "#f6b17a",
            borderColor: "#f6b17a",
            pointRadius: 0,
          },
        ],
      },
      chartOptions: {
        responsive: true,
        scales: {
          x: {
            grid: {
              color: "#424769",
            },
            ticks: {
              color: "#ff0000",
            },
          },
          y: {
            grid: {
              color: "#424769",
            },
            ticks: {
              color: "#00ff00",
            },
          },
        },
      },
    };
  },
});
</script>

I would like to find out how to be able to change the color of the axis on the chart.

Upvotes: 0

Views: 137

Answers (1)

Αpostolos-Valiakos
Αpostolos-Valiakos

Reputation: 49

you can check zeroLineColor in the GridLines

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

Upvotes: 0

Related Questions