如何在vue-chartjs中修改图表字体颜色？

Got it, let's fix that gray font issue! To customize the font color of your bar chart, you'll need to extend the chart's configuration options to target different text elements (like axis ticks, legend labels, etc.). Here's how to update your code:

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#ffff',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ],
    }, {
      responsive: true,
      maintainAspectRatio: false,
      // Add these configurations to change font colors
      plugins: {
        legend: {
          labels: {
            color: '#000' // Replace with your desired color, e.g., '#ff0000' for red, 'blue' for named color
          }
        }
      },
      scales: {
        x: {
          ticks: {
            color: '#000' // Color for X-axis tick labels (months)
          }
        },
        y: {
          ticks: {
            color: '#000' // Color for Y-axis tick labels (numbers)
          }
        }
      }
    })
  }
}

Key Customizations Explained: #

• Legend Text: The plugins.legend.labels.color property controls the color of the legend label ("GitHub Commits" in your code).
• Axis Ticks: Use scales.x.ticks.color and scales.y.ticks.color to adjust the color of the month labels (X-axis) and numerical values (Y-axis).
• Bonus: Axis Titles (if you add them later): If you want to add colored titles to your axes, you can extend the scales config like this:

  scales: {
    x: {
      title: {
        display: true,
        text: 'Months',
        color: '#000'
      },
      ticks: { /* ... */ }
    }
  }
  

Just swap out #000 with any valid CSS color value (hex, RGB, named color, etc.) to match your design needs!

内容的提问来源于stack exchange，提问作者Four Profiteers