CODEWITHSUNDEEP
reactjsapexchartsreact-apexcharts
Nikster
Nikster

Reputation: 474

React Apexchart Multi-Series Bar Chart

I'm trying to make a multi-series bar chart (NOT A TIME SERIES) and I've finally figured it out but my bars are too thin because I have to render null values in other places in order to make the chart function correctly.

What I want are thicker bars. I have tried to change the barHeight as well, but then the rest of my bars are off the screen (refer to the last image)

Does anyone have an idea of what I can do?

Here is before

enter image description here

Here is after enter image description here

I've had to modify my data source from this

"series": [
        {
            "name": "New York Times",
            "data": [
                5674
            ]
        },
        {
            "name": "CNET",
            "data": [
                2637
            ]
        },
        {
            "name": "Fox News",
            "data": [
                2524
            ]
        },
        {
            "name": "The Best BBQ in St. Louis",
            "data": [
                2178
            ]
        },
        .....
    ],

to this

    series: [
      {
        name: "New York Times",
        data: [5674, null, null, null, null, null, null, null, null, null],
      },
      {
        name: "CNET",
        data: [null, 2637, null, null, null, null, null, null, null, null],
      },
      {
        name: "Fox News",
        data: [null, null, 2523, null, null, null, null, null, null, null],
      },
      {
        name: "The Best BBQ in St. Louis",
        data: [null, null, null, 2178, null, null, null, null, null, null],
      },
      ....
    ],

here is my chart code


    <Chart
      options={{
        chart: {
          type: "bar",
          height: 350,
        },
        xaxis: {
          categories: data.labels,
        },
        colors: [
          "#808bf7",
          "#798ff4",
          "#6e95f0",
          "#6399eb",
          "#5b9ce8",
          "#52a2e3",
          "#49a7e1",
          "#43abde",
          "#3caedb",
          "#3ab1d9",
        ],
        dataLabels: {
          enabled: true,
          textAnchor: "start",
          style: {
            fontSize: "12px",
            fontFamily: "Nunito, Arial, sans-serif",
            fontWeight: 500,
            colors: [
              "#808BF7",
              "#798FF4",
              "#6E95F0",
              "#6399EB",
              "#5B9CE8",
              "#52A2E3",
              "#49A7E1",
              "#43ABDE",
              "#3CAEDB",
              "#3AB1D9",
            ],
          },
          background: {
            enabled: true,
            foreColor: "#fff",
            padding: 4,
            borderRadius: 2,
            borderWidth: 0,
            borderColor: "#fff",
            opacity: 1,
            dropShadow: {
              enabled: false,
              top: 1,
              left: 1,
              blur: 1,
              color: "#000",
              opacity: 0.45,
            },
          },
        },
        plotOptions: {
          bar: {
            horizontal: true,
            barHeight: "100%",
          },
        },
        tooltip: {
          enabled: true,
          intersect: true,
        },
      }}
      series={data.series}
      type="bar"
      height="500"
    />

enter image description here

Upvotes: 0

Views: 1182

Answers (2)

Siddhant Shekhar
Siddhant Shekhar

Reputation: 1

You can use something like this

options = {
  chart: {
    type: 'bar'
  },
  plotOptions: {
    bar: {
      horizontal: true
    }
  },
  series: [{
    data: [{
      x: 'category A',
      y: 10
    }, {
      x: 'category B',
      y: 18
    }, {
      x: 'category C',
      y: 13
    }]
  }]
}

Upvotes: 0

SeiryuV
SeiryuV

Reputation: 126

in plotOptions add

plotOptions: {
  bar: {
   horizontal: true,
   barHeight: '20',
  },
},

Basic Example

https://jsfiddle.net/vo9xa4f8/57/

Upvotes: 0

Related Questions