React Apexchart Multi-Series Bar Chart

Question

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

Here is after

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"
    />

score 0 · Answer 1 · answered Aug 22 '23 at 08:20

0

in plotOptions add

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

Basic Example

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

answered Aug 22 '23 at 08:20

SeiryuV

126
5

If you refer to the last image I posted, I said I did change the bar height but in doing so the bars started to disappear off my chart – Nikster Aug 22 '23 at 18:41
Instead of percentages, have you tried putting it in px? or instead put less percentage, 75% for example – SeiryuV Aug 23 '23 at 05:28
yup, i've tried PX and % values as well as no suffix. Same result. It seems to be with the fact that rendering a null value in place for where a value is makes the bar thinner by default because there are still x number of other bars that couldve been displayed – Nikster Aug 25 '23 at 17:09
Also your JS fiddle is a one dimensional array of data vs the data i have provided is a multi-dimensional array – Nikster Aug 25 '23 at 17:34
Check this posts link1: https://stackoverflow.com/questions/74984437/create-bar-chart-from-multidimensional-array-series-with-apexcharts-or-vueape Link2: https://stackoverflow.com/questions/73801255/how-do-i-format-data-arrays-in-the-correct-way-react-chartjs – SeiryuV Aug 28 '23 at 14:12

React Apexchart Multi-Series Bar Chart

1 Answers1