title: Having trouble with Charts.js colors
body: <p>A friend helped me get Charts.js working and I'm now trying to mentally reverse engineer what he's done that works for displaying the data to make the data display how I'd like. There's typically 8-10 lines to draw, so I'm trying to make the data easier to read by introducing colour.</p>
  <p>I was able to get the lines to each have a unique color by setting values for borderColor, however the points that appear on the line don't match the line and instead change as they go along the line. I'd like the points to be consistent with the line. I'm not sure where I've gone wrong there. Can someone please help me fix these color issues?</p>
  <p><a href="https://i.stack.imgur.com/nouZL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nouZL.png" alt="Line graph of many colors" /></a></p>
  <p>For simplicity I've trimmed the code below to 3 colours, but I have 11 mapped out in my code. The below will cycle 3 point colors along each line. What I'm after is the line colour, background and point color to match.</p>
  <pre><code>&lt;script setup lang=&quot;ts&quot;&gt;
  import { Line } from &quot;vue-chartjs&quot;;
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale,
  } from &quot;chart.js&quot;;
  import type { DataYearlyGrowth} from &quot;@/types/myData&quot;;
  import { useDark } from &quot;@vueuse/core&quot;;
  
  ChartJS.register(
    Title,
    Tooltip,
    Legend,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale
  );
  
  const props = defineProps&lt;{ data: Array&lt;DataYearlyGrowth&gt; }&gt;();
  
  const chartId = &quot;line-chart&quot;;
  const datasetIdKey = &quot;label&quot;;
  const width = 300;
  const height = 100;
  const styles = {};
  
  const yearlyGrowthValues = props.data;
  const years = [...new Set(yearlyGrowthValues.map((x) =&gt; x.year.toString()))];
  
  const dataByTypes = yearlyGrowthValues.reduce((rv, x) =&gt; {
    (rv[x.type] = rv[x.type] || []).push(x.value);
    return rv;
  }, {} as { [key: string]: Array&lt;any&gt; });
  
  const chartData = {
    labels: years,
    datasets: Object.keys(dataByTypes).map((key) =&gt; ({
      text: 'Yearly growth',
      label: key,     // TODO: Make the font colour white
      data: dataByTypes[key],
      hoverBackgroundColor: 'rgba(211, 211, 211, 0.8)',
      borderColor:    // Line colour
        [
          'rgba(138, 20, 21, 0.8)',
          'rgba(241, 16, 22, 0.8)',
          'rgba(249, 148, 0, 0.8)'
        ],
      backgroundColor: // Middle of line colour. Just colours the square in the key
         [
           'rgba(138, 20, 21, 1)',
           'rgba(241, 16, 22, 1)',
           'rgba(249, 148, 0, 1)'
         ],
      pointBackgroundColor:   // Colours the middle of the points where data intersects years
        [
          'rgba(138, 20, 21, 0.8)',
          'rgba(241, 16, 22, 0.8)',
          'rgba(249, 148, 0, 0.8)'
        ],
      fill: true,
      borderWidth: 2,
      cubicInterpolationMode: 'monotone',
      //stepped:  'middle',
      stepped: false,
      borderJoinStyle: &quot;round&quot;,
      tension: 0.2,
    }))
  };
  
  const chartOptions = {
  responsive: true,
  };
  
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div class=&quot;bg-qual-mid&quot;&gt;
      &lt;Line
        :chart-options=&quot;chartOptions&quot;
        :chart-data=&quot;chartData as any&quot;
        :chart-id=&quot;chartId&quot;
        :dataset-id-key=&quot;datasetIdKey&quot;
        :plugins=&quot;[]&quot;
        :styles=&quot;styles&quot;
        :width=&quot;width&quot;
        :height=&quot;height&quot;
      /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  </code></pre>
  <p>Also, I'm trying to get Labels to display in white I tried this, but it made no difference</p>
  <pre><code>const chartOptions = {
   legend: {
     labels: {
      fontColor: 'white' 
     }
   },
  responsive: true,
  };
  </code></pre>