2

I'm running into a problem. The bar series is not coming right under it's label. I can't figure out what is going wrong.

enter image description here

Here is the code for it

const FlexibleXYPlot = makeWidthFlexible(XYPlot);


<FlexibleXYPlot height={graphContainer.height} margin={graphContainer.margin} xDistance={0} xType="ordinal">
        <HorizontalGridLines />
        <XAxis/>
        <YAxis orientation="right" style={yAxisStyles} />
        {  this.state.data.map((lineData, i) => (
      <VerticalBarSeries
        key={i}
        data={lineData.timeline}
      />
    )); }
      </FlexibleXYPlot>

and the data is this 

[
    {
      "timeline": [
        {
          "x": "dataA",
          "y": 12.21
        }
      ]
    },
    {
      "timeline": [
        {
          "x": "dataB",
          "y": 21.09
        }
      ]
    },
    {
      "timeline": [
        {
          "x": "dataC",
          "y": 16.66
        }
      ]
    }
Teymour
  • 1,832
  • 1
  • 13
  • 34
Gardezi
  • 2,692
  • 2
  • 32
  • 62
  • please attach your style – Alex Jan 07 '20 at 12:08
  • Hi @Alex, I'm using react-vis styles. I've figured out the problem. It's because for each bar I'm rendering a separate series which is causing the issue. I've fixed that but because of it another issue popped up and that is, now I can't render each bar with different color. Any idea on how can I achieve it – Gardezi Jan 07 '20 at 12:15
  • I'm trying to reproduce your issue, do you have any sandbox? – Alex Jan 07 '20 at 12:23
  • @Alex here is the url https://codesandbox.io/s/react-vis-zoom-nkl8b?fontsize=14&hidenavigation=1&theme=dark – Gardezi Jan 07 '20 at 12:28
  • @Alex, thanks for your time. I've figured it out – Gardezi Jan 07 '20 at 12:39

1 Answers1

3

I figured it out.

For each bar I was creating a separate series. I just had to pass the whole data to a single series. Now if somebody wants each bar to have a different color in a single series they can pass the color with the data like given below 

[
    {
          "x": "dataA",
          "y": 12.21,
          "color": <something>
    },
    {

          "x": "dataB",
          "y": 21.09,
          "color": <something>
    },
    {
          "x": "dataC",
          "y": 16.66,
          "color": <something>
    }
]

and we need to pass colorType="literal" to the series itself.

Gardezi
  • 2,692
  • 2
  • 32
  • 62