How to use stack bars from chartist in reactjs?

Question

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:

Try placing `stackBars: true` into options property of `ChartistGraph` — Sachi Tekina, Jun 06 '18 at 08:53
@SachiTekina Yeah there was a typo `options={ }` Works fine can you write an answer — stone rock, Jun 06 '18 at 09:02
@SachiTekina Can you please help me here : https://stackoverflow.com/questions/50733529/how-to-use-plugins-with-chartist-js — stone rock, Jun 07 '18 at 05:27

score 1 · Accepted Answer · answered Jun 06 '18 at 09:06

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;

Can you please help me here: https://stackoverflow.com/questions/51011612/how-to-style-elements-for-responsive-web-design — stone rock, Jun 24 '18 at 16:15

How to use stack bars from chartist in reactjs?

1 Answers1