Can't get bar chart colors in Chart js working in React Js

Question

This is my first time working with Chart Js and I managed to get it displaying on my page but the keys 'label', 'backgroundColor', 'borderColor', and 'borderWidth' won't display. The keys 'labels' and 'data' work just fine as I can see the labels and the bars in the chart. I tried assigning the non-displaying keys to variables just like 'labels' and 'data' to see if it would work that way but no luck. I also tried passing hex colors and regular color names like red, blue, etc. but that didn't work either. If anyone could provide some assistance it would be greatly appreciated, thanks!

'use strict';

import React, { Component } from 'react';

var Chart = require("react-chartjs").Bar;

class BarChart extends Component {

  capitalize(name) {
    return name.charAt(0).toUpperCase() + name.slice(1);
  }

  render() {

    var pokeLabels = this.props.stats.map((label) => {
      return this.capitalize(label.stat.name)
    })

    var pokeDataSet = this.props.stats.map((set) => {
      return set.base_stat
    })

    console.log(this.props.stats);

    var data = {
      labels: pokeLabels,
      datasets: [
        {
            label: 'Pokemon Stats',
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,          
            data: pokeDataSet
        }
      ]
    }

    return (
      <div className='row'>
        <div className='col-xs-12 col-sm-offset-3 col-xs-offset-0'>
          <Chart data={data} width="600" height="250" redraw />
        </div>
      </div>
    );
  }   

}

export default BarChart;

Postfix

Can you add more details to this question please - like how's your react code looking like. – Woodrow

I posted the contents of the entire file, thanks! – Postfix

Answer 1

So I was able to get the colors working by doing this:

    datasets: [
        {
            label: "My First dataset",
            fillColor: ["rgba(0,10,220,0.5)","rgba(220,0,10,0.5)","rgba(220,0,0,0.5)","rgba(120,250,120,0.5)" ],
            strokeColor: "rgba(220,220,220,0.8)", 
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: pokeDataSet
        }

Hope this can help someone who has a similar issue!

Postfix

Yes it did! Thanks mate! :D fillColor = backgroundColor, strokeColor = borderColor, highlightFill = hoverBackgroundColor and highlightStroke = hoverBorderColor. – Maya

FYI and anybody that would fall on the same issue, this doc can help: github.com/chartjs/Chart.js/blob/v1.1.1/docs/02-Bar-Chart.md – Maya

Answer 2

The background color will change the color of the bars.

So, you can give different colors to different bar.

datasets: [
          {
        label: 'My First dataset',
        backgroundColor: ['rgba(0,10,220,0.5)', 'rgba(220,0,10,0.5)'],
        borderColor: 'rgba(0,0,0,1)',
        data: pokeDataSet,
          },
    ],

Metabolism