title: Change the color of the legend box and the color of the x grid lines in chart.js
body: <p>Good day to all:</p>
  <p>Recently I have started working with Vue.js(2.6.12) + Vuetify(2.3.10) and Chart.js(3.0.2). So I'm a newbie (again).</p>
  <p>I have created a componenent which wraps the Bar chart that Chart.js allows us to create. Here it's a picture of it:<a href="https://i.stack.imgur.com/PSVQi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PSVQi.png" alt="Component created" /></a></p>
  <p>The only two things that I want to change are the little box that comes near to the legend title and some grid x lines.</p>
  <p>In the case of the little legend box is red. I would like that It's aligned with the blue color of the legend title text. As I show you in this picture:<a href="https://i.stack.imgur.com/N171A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N171A.png" alt="Box and legend title text" /></a><a href="https://i.stack.imgur.com/J1biR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J1biR.png" alt="Result that I would like to achieve" /></a></p>
  <p>Finally I want to include some color (pink) in the X axis:<a href="https://i.stack.imgur.com/xfxGT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xfxGT.png" alt="" /></a></p>
  <p>I'm unable to achieve this. I have regarded and follow the official documentation and nothing works :S.</p>
  <ul>
  <li>Create the function for painting some axis in colors: <a href="https://www.chartjs.org/docs/3.0.2/samples/scale-options/grid.html" rel="nofollow noreferrer">https://www.chartjs.org/docs/3.0.2/samples/scale-options/grid.html</a></li>
  <li>Change the colors of the legend: <a href="https://www.chartjs.org/docs/3.0.2/configuration/legend.html#legend-label-configuration" rel="nofollow noreferrer">https://www.chartjs.org/docs/3.0.2/configuration/legend.html#legend-label-configuration</a></li>
  </ul>
  <p>In the case of the legend title box I have noticed that always takes the color of the first element.
  In the case of the axis, the function supported by chart.js doesn't work for me. It doesn't print me the x axis at all.</p>
  <p>Things that I have tried:</p>
  <ul>
  <li>Upgrade to chart.js 3.3.0 but I got an error like this: &quot;&quot;
  The reason I was using 3.0.2 it's because it's the only version which
  is working to me from the 3.0.0 versions.</li>
  <li>Downgrade to 2.9.3/4. I wasn't able to change the color of the box or the axis lines, but the rest worked fine.</li>
  <li>Use a wrapper: <a href="https://vue-chartjs.org/" rel="nofollow noreferrer">https://vue-chartjs.org/</a>. It didn't work</li>
  </ul>
  <p>Code of the whole component:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;container pa-3&quot; fill-height fluid style=&quot;width: 100%&quot;&gt;
      &lt;!-- We create the chart --&gt;
      &lt;canvas id=&quot;myChart1&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Chart from &quot;chart.js/auto&quot;;
  
  export default {
    name: &quot;Chart&quot;,
  
    components: {},
  
    props: {},
  
    data: () =&gt; ({
      ctx: null,
      myChart: null,
      type: &quot;bar&quot;,
      data: {
        labels: [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;],
        datasets: [
          {
            data: [1, 2, 3, 4],
            backgroundColor: [&quot;#c30&quot;, &quot;#e37609&quot;, &quot;#ffda05&quot;, &quot;#fffb05&quot;],
          },
        ],
      },
      options: {
        plugins: {
          legend: {
            display: true,
            labels: {
              color: &quot;#00a3fb&quot;,
            },
          },
        },
        scales: {
     
        },
      },
    }),
    methods: {
      createChart: function () {
        // destroy the previous graph
        if (this.myChart != null) this.myChart.destroy();
        // create a new one
        this.ctx = document.getElementById(&quot;myChart1&quot;);
        this.myChart = new Chart(this.ctx, {
          type: this.type,
          data: this.data,
          options: this.options,
        });
        this.myChart.render();
      },
    },
  
    destroyed() {},
  
    mounted() {
      this.createChart();
    },
    watch: {},
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  &lt;/style&gt;
  </code></pre>
  <p>For using it, you should:</p>
  <ul>
  <li>Import it in the  section</li>
  <li>Declare it in the component section</li>
  <li>Call it by <code>&lt;NameOfComponetGiven/&gt;</code> tag</li>
  </ul>
  <p>Any help would be quite aprecciated.
  Thank you very much.</p>