How to position a line over a Histogram in React Google Charts

Viewed 202

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

0 Answers
Related