6

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;
Banner
  • 583
  • 2
  • 6
  • 19

2 Answers2

11

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!

Banner
  • 583
  • 2
  • 6
  • 19
  • Yes it did! Thanks mate! :D `fillColor` = `backgroundColor`, `strokeColor` = `borderColor`, `highlightFill` = `hoverBackgroundColor` and `highlightStroke` = `hoverBorderColor`. – Romain G Oct 20 '16 at 14:44
  • FYI and anybody that would fall on the same issue, this doc can help: https://github.com/chartjs/Chart.js/blob/v1.1.1/docs/02-Bar-Chart.md – Romain G Oct 21 '16 at 09:34
0

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,
          },
    ],
Peter Csala
  • 17,736
  • 16
  • 35
  • 75
Kanika Aggarwal
  • 11