title: Chart.js - Line charts with different colors for each border lines
body: <p>As per chart.js <a href="http://www.chartjs.org/docs/latest/charts/line.html" rel="noreferrer">documentation</a> I can specify an Array for Colors of border and background.</p>
  
  <p>However on using this following configuration for chart.js. I am trying to figure out why array values for <code>borderColor</code> and <code>backgroundColor</code> are not working.</p>
  
  <p>I am using chart.js 2.6.0 via react-chartjs-2. Is this not something which is supported out of the box with chart.js v2 ?</p>
  
  <pre><code>"{
   "type": "Line",
   "labels": [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday"
   ],
   "datasets": [
    {
     "label": "Page Views (This Week)",
     "fill": false,
     "lineTension": 0.1,
     "backgroundColor": [
      "rgba(75,192,192, 0.4)",
      "rgba(1, 223, 111, 0.4)",
      "rgba(75,192,192, 0.4)",
      "rgba(1, 223, 111, 0.4)",
      "rgba(75,192,192, 0.4)"
     ],
     "borderColor": [
      "rgba(75,192,192, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(75,192,192, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(75,192,192, 1)"
     ],
     "borderCapStyle": "butt",
     "borderDash": [],
     "borderDashOffset": 0,
     "borderJoinStyle": "miter",
     "pointBorderColor": [
      "rgba(75,192,192, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(75,192,192, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(75,192,192, 1)"
     ],
     "pointBackgroundColor": "#fff",
     "pointBorderWidth": 1,
     "pointHoverRadius": 5,
     "pointHoverBackgroundColor": "rgba(75,192,192, 1)",
     "pointHoverBorderColor": "rgba(220,220,220,1)",
     "pointHoverBorderWidth": 2,
     "pointRadius": 1,
     "pointHitRadius": 10,
     "data": [
      19615,
      37337,
      54307,
      70944,
      87444
     ]
    },
    {
     "label": "Page Views (Last Week)",
     "fill": false,
     "lineTension": 0.1,
     "backgroundColor": [
      "rgba(242, 169, 12, 0.4)",
      "rgba(1, 223, 111, 0.4)",
      "rgba(242, 169, 12, 0.4)",
      "rgba(1, 223, 111, 0.4)",
      "rgba(242, 169, 12, 0.4)",
      "rgba(1, 223, 111, 0.4)",
      "rgba(242, 169, 12, 0.4)"
     ],
     "borderColor": [
      "rgba(242, 169, 12, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(242, 169, 12, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(242, 169, 12, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(242, 169, 12, 1)"
     ],
     "borderCapStyle": "butt",
     "borderDash": [],
     "borderDashOffset": 0,
     "borderJoinStyle": "miter",
     "pointBorderColor": [
      "rgba(242, 169, 12, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(242, 169, 12, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(242, 169, 12, 1)",
      "rgba(1, 223, 111, 1)",
      "rgba(242, 169, 12, 1)"
     ],
     "pointBackgroundColor": "#fff",
     "pointBorderWidth": 1,
     "pointHoverRadius": 5,
     "pointHoverBackgroundColor": "rgba(242, 169, 12, 1)",
     "pointHoverBorderColor": "rgba(220,220,220,1)",
     "pointHoverBorderWidth": 2,
     "pointRadius": 1,
     "pointHitRadius": 10,
     "data": [
      17819,
      35785,
      52761,
      69470,
      84987,
      104958,
      125497
     ]
    }
   ]
  }"
  </code></pre>
  
  <p>Generated graph looks like this, I was expected alternating line segments to have alternate colors.</p>
  
  <p><a href="https://i.stack.imgur.com/Q4KnU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q4KnU.png" alt="enter image description here"></a></p>