CODEWITHSUNDEEP
javascriptreactjschart.jschartkick
Orchis
Orchis

Reputation: 533

How to set additional options for Chart.js BarCharts using React-Chartkick

I'm trying to display a barchart using React-Chartkick and Chart.js, and I'd like to customise the colours of the bars. Currently, I'm able to set all the bars to the same colour by passing a prop like this: <BarChart colours={["#fff"]} />.

Using LineCharts in React-Chartkick, you can set colours of the lines by passing an array of colours through that prop. BarCharts only seems to accept the first colour, however. Is this a limitation of React-Chartkick, or am I doing something wrong?

I've tried passing options (as described here: https://www.chartjs.org/docs/latest/charts/bar.html#styling ) through the library prop as that is how I've customised the colours of the axes and labels, but this doesn't seem to affect the bars.

Here's my current code: 

    state = {
        chartLibraryOptions: {
            borderColor: "#e34402", // does nothing here
            backgroundColor: "#e34402", // nor this
            scales: {
                yAxes: [
                    {
                        ticks: { fontColor: "#fff", autoSkip: false }
                    }
                ],
                xAxes: [
                    {
                        ticks: { fontColor: "#fff" }
                    }
                ]
            }
        }
    };

    render() {
        return (
            <BarChart
                data={this.state.chartData}
                library={this.state.chartLibraryOptions}
                colors={["#e34402", "#e3b502"]} // All bars are the first colour
            />
        );
    }

I'm expecting to be able to change the colours of each bar, but after all this I'm not sure if that's possible through Chartkick?

Upvotes: 0

Views: 877

Answers (1)

Akolade Adesanmi
Akolade Adesanmi

Reputation: 1250

Well, I used the same node package in a project with different approach kinda work for me. Almost all the charts take the same attributes.

Basically, this attribute dataset={{ backgroundColor: ['white', 'yellow' ], }} is all you need to colour each bar. You can either pass string or array of string to backgroundColor.

The backgroundColor in dataset takes two types of data String and Array(object). Typical examples of passing data are below.

  1. When you set backgroundColor to a string, it applied the same colour to each bar. e.g backgroundColor: 'red'

BarChart - <BarChart dataset={{ backgroundColor: 'red', }} />

bar chart one color]

  1. When you set backgroundColor to an array, it applied each colour in the array to each bar. e.g backgroundColor: ['red', 'yellow'], then you create a loop of colours base on the data length.

column chart - <ColumnChart dataset={{ backgroundColor: ['red', 'yellow' ], }} />

enter image description here

React Implementation Below:

/* eslint-disable no-plusplus */
 import React from 'react';
 import { ColumnChart, BarChart } from 'react-chartkick';
 import { chartOne } from '../common/chartData';
 import 'chart.js';

 const MonthlyGrowth = () => {
    const handleBgColors = () => {
       const firstColor = "#A00B16", secondColor = "#FAA226";
       const arrOfBgColors = [];
       for (let i = 1; i <= chartOne.length; i++) {
           if (i % 2 === 0) {
              arrOfBgColors.push(secondColor)
           } else {arrOfBgColors.push(firstColor)}
       }
       return arrOfBgColors;
   }

   return (
     <div className="bukka-card uk-card-default bg-white pt-4 pb-2 mr-1 pl-3 pr-2 pl- 
       lg-5">
        <h2 className="mt-2">4,500,000</h2>
        <BarChart
           dataset={{ borderWidth: 0, width: 0, backgroundColor: handleBgColors(), }}
           data={chartOne}
        />
      </div>
    )
}

export default MonthlyGrowth;

Upvotes: 2

Related Questions