Seeking help on how to adjust the color of the axis in my graph. Has anyone encountered a similar issue before? The chart I'm working with resembles the one shown in the image. Not sure if this issue is related to it being a time graph. Below is the Vue 3 code for the graph:
https://i.sstatic.net/dXM9J.png
<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>
Any insights on how to alter the axis color on the chart would be greatly appreciated.