CODEWITHSUNDEEP
timelineapexcharts
Andrian Stoykov
Andrian Stoykov

Reputation: 3

Apexcharts - bars are too small

I am using a timeline chart from Apexcharts 3.19.0 and I noticed that every time I add a new vertical "category" the bars start to shrink. Is it possible to set the bar height a fixed size?

I am building a timeline chart that represents a production line. Bars are the production and the categories are the machines. And one build is related only to one machine.

This is the series that I pass and if I continue to add new machines bars continue to shrink.

I noticed that Apexcharts makes every bar with such height that every row can take all bars, but I don't need this in my case.

    [
  {
    "name": "B-2004281001-6763",
    "data": [
      {
        "x": "Cube 3-1",
        "y": [
          1588068083109,
          1588071676403
        ],
      }
    ]
  },
  {
    "name": "B-2004281000-8133",
    "data": [
      {
        "x": "BiZon Prusa i3 Steel-2",
        "y": [
          1588068021615,
          1588075213496
        ],
      }
    ]
  },
  {
    "name": "B-2004281001-9110",
    "data": [
      {
        "x": "BiZon Prusa i3 Steel-2",
        "y": [
          1588068068356,
          1588078856311
        ],
      }
    ]
  }
]

That's how my chart looks like

My Chart

Upvotes: 0

Views: 2212

Answers (1)

jesse crossley
jesse crossley

Reputation: 56

I had a similar issue and I got around it by using a common shared "x" value ("Production" in your example) and setting "name" values in the series data arrays that were then displayed by dataLabels.

So your modified data:

[
  {
    name: "B-2004281001-6763",
    data: [{ name: "Cube 3-1", x: "Production", y: [ 1588068083109, 1588071676403 ] }]
  },
  {
    name: "B-2004281000-8133",
    data: [{ name: "BiZon Prusa i3 Steel-2", x: "Production", y: [1588068021615, 1588075213496 ] }]
  },
  {
    name: "B-2004281001-9110",
    data: [{ name: "BiZon Prusa i3 Steel-2", x: "Production", y: [1588068068356, 1588078856311 ], } ]
  }
]

and the corresponding dataLabels option (black text color for visibility)

dataLabels: {
  enabled: true,
  formatter: function(val, opts) {
    return opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].name;
  },
  style: {
    colors: ["#000000"]
  }
}

Check it out here

Upvotes: 0

Related Questions