CODEWITHSUNDEEP
javascriptreactjschartist.js
stone rock
stone rock

Reputation: 1953

How to use stack bars from chartist in reactjs?

I am referring chartist docs -> https://gionkunz.github.io/chartist-js/examples.html#stacked-bar

I have seen the code in above link so I am trying to implement it in react component.

chart.js:

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";

const simpleChartData = {
          labels: ['Q1', 'Q2', 'Q3', 'Q4'],
          series: [
            [800000, 1200000, 1400000, 1300000],
            [200000, 400000, 500000, 300000],
            [100000, 200000, 400000, 600000]
          ],
        stackBars: true
}

class Chart extends Component {

  render(){
    return(
      <div>
            <ChartistGraph data={simpleChartData} type={'Bar'} /> 
      </div>

    )}

}

export default Chart;

I am not getting stacked bar charts instead I am getting simple bar charts. See screenshot:

enter image description here

Upvotes: 0

Views: 1137

Answers (1)

Sachi Tekina
Sachi Tekina

Reputation: 1810

Try placing stackBars: true into options property of ChartistGraph:

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";

const simpleChartData = {
          labels: ['Q1', 'Q2', 'Q3', 'Q4'],
          series: [
            [800000, 1200000, 1400000, 1300000],
            [200000, 400000, 500000, 300000],
            [100000, 200000, 400000, 600000]
          ]

}

const options = {
     stackBars: true
}
class Chart extends Component {

  render(){
    return(
      <div>
            <ChartistGraph data={simpleChartData} options={options} type={'Bar'} /> 
      </div>

    )}

}

export default Chart;

Upvotes: 1

Related Questions