2

I am using the React Google Charts plugin, and have been breaking my brain trying to implement this. The issue is the following. I want to draw a line over a histogram, depending on a user selected number, which is stored in a state. The best way to demonstrate what I'm trying to achieve is through an Image.

Histogram with a line (drawn over with MS Paint)

In this example, the user would have selected the number 40. So a vertical line is drawn over the number 40 (x=40).

This is the React code for the histogram.

<Graph>
  <GraphHeader>
    <h3>Gráfico de probabilidade</h3>
  </GraphHeader>
  <Chart
    chartType="Histogram"
    width="100%"
    height="200px"
    loader={<LoadingContainer />}
    data={chartProbData}
    options={{
      legend: 'none',
      vAxis: { title: 'Frames' },
      hAxis: { title: 'Probabilidade' },
      histogram: { hideBucketItems: true, maxNumBuckets: 10 },
      backgroundColor: darken(0.03, '#312e38'),
    }}
  />
</Graph>

And this is the styling of each component:

export const Graph = styled.div`
  text {
    fill: #999 !important;
  }
  width: 100%;
`;

export const GraphHeader = styled.div`
  margin-bottom: 10px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  h3 {
    font-size: 20px;
  }
`;

I am prepared to use hacks to achieve this, although I would prefer a cleaner answer. If anyone knows of a smart way to achieve this, through css positioning, the google charts api or even some pure javascript solution I would very much appreciate it.

PS: If any extra information is required I will be happy to provide it.

PPS: As requested by @m4n0, I have created a codesandbox so that anyone can access the code itself. Here is the link: https://codesandbox.io/s/react-charts-vertical-line-over-graph-lpw52?file=/src/index.js

David Jentjens
  • 567
  • 7
  • 18
  • 1
    If you can recreate the demo through Codesandbox or something you are comfortable with, I can help! :) – m4n0 Apr 13 '21 at 16:48
  • Thank you very much! I've created a sandbox as you requested. Here is the link: https://codesandbox.io/s/naughty-golick-lpw52?file=/src/index.js – David Jentjens Apr 13 '21 at 18:39
  • 1
    Have you tried this method? https://stackoverflow.com/questions/39543226/how-can-i-attach-the-image-or-icon-on-edge-of-google-line-chart/39553121#39553121 Because any CSS hack would be overridden by the dynamic JS working on it. – m4n0 Apr 14 '21 at 05:07
  • Can I use the regular google-charts api together with the react-google-charts lib? Won't this cause some compatibility issues? If not, could you perhaps show me how to do this in the codesandbox? – David Jentjens Apr 14 '21 at 12:49
  • 1
    I have an idea like this using SVG: https://nimb.ws/a8tBDe If you say that is fine, I can try writing custom JS for it. – m4n0 Apr 14 '21 at 17:22
  • That would be perfect! I would appreciate it very much! – David Jentjens Apr 14 '21 at 20:22
  • I tried much on Codesandbox react but it was throwing some unfamiliar errors. I had to shift it to CodePen requiring only the required code. Please try to integrate this: https://codepen.io/m4n0/pen/JjEZWPO if this is what you need. – m4n0 Apr 15 '21 at 16:27
  • Hey, thanks for the code! However, I'm not sure how to make this dynamic. I think you put in hard coded numbers there to make the line appear. How could I make the lines appear where the input is? – David Jentjens Apr 16 '21 at 16:01
  • 1
    They are not hard coded numbers. If you check the variables `rectFifthPosX` and `rectFifthPosY` they get the position of your fifth bar. -2 and other numbers are to adjust them from the fifth bar positions. https://nimb.ws/sKTg9L – m4n0 Apr 16 '21 at 17:43

0 Answers0