title: trying to create line down a graph in nivo at set time intervals
body: <p>I'm using nivo charts to visualize some sick datasets.</p>
  <p>The example is like this,</p>
  <pre><code>import { ResponsiveLine } from '@nivo/line'
  
  const MyResponsiveLine = ({ data /* see data tab */ }) =&gt; (
      &lt;ResponsiveLine
          data={data}
          margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
          xScale={{ type: 'point' }}
          yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
          yFormat=&quot; &gt;-.2f&quot;
          axisTop={null}
          axisRight={null}
          axisBottom={{
              orient: 'bottom',
              tickSize: 5,
              tickPadding: 5,
              tickRotation: 0,
              legend: 'transportation',
              legendOffset: 36,
              legendPosition: 'middle'
          }}
          axisLeft={{
              orient: 'left',
              tickSize: 5,
              tickPadding: 5,
              tickRotation: 0,
              legend: 'count',
              legendOffset: -40,
              legendPosition: 'middle'
          }}
          pointSize={10}
          pointColor={{ theme: 'background' }}
          pointBorderWidth={2}
          pointBorderColor={{ from: 'serieColor' }}
          pointLabelYOffset={-12}
          useMesh={true}
          legends={[
              {
                  anchor: 'bottom-right',
                  direction: 'column',
                  justify: false,
                  translateX: 100,
                  translateY: 0,
                  itemsSpacing: 0,
                  itemDirection: 'left-to-right',
                  itemWidth: 80,
                  itemHeight: 20,
                  itemOpacity: 0.75,
                  symbolSize: 12,
                  symbolShape: 'circle',
                  symbolBorderColor: 'rgba(0, 0, 0, .5)',
                  effects: [
                      {
                          on: 'hover',
                          style: {
                              itemBackground: 'rgba(0, 0, 0, .03)',
                              itemOpacity: 1
                          }
                      }
                  ]
              }
          ]}
      /&gt;
  )
  </code></pre>
  <p>With the data simply like this,</p>
  <pre><code>0: 0
  1: 0
  2: 0
  3: 0
  4: 0
  5: 0
  6: 0
  7: 0
  8: 0
  9: 0
  10: 0
  11: 0
  12: 0
  13: 0
  14: 0
  15: -4.1524
  16: -2.1525
  17: -3.12351
  18: 5.123123
  19: 3.123123
  20: 0.6547929999999998
  21: 0.414856
  22: -1.1863169999999998
  23: 0.7934469999999998
  </code></pre>
  <p>I want to really simply add in a at time 10, 14, 18 a line for when i exercise. Ideally, I'd like to be able to shade the area beneath that line for 4 hours afterwards, in a sort of parabola (or a specific shape really), having the shading finish at 4 hours after.</p>
  <p>I'm quite lost on how to achieve this with Nivo Charts. I suppose this isn't a normal functionality but was wondering if there was something I was missing that I could work in?</p>
  <p>A good example of what I'm trying to achieve is like this sandbox,</p>
  <p><a href="https://codesandbox.io/s/simple-composed-chart-forked-b0bfi" rel="nofollow noreferrer">https://codesandbox.io/s/simple-composed-chart-forked-b0bfi</a></p>
  <p>I'd be happy to use this sandboxes code if it could be a bit more visually appealing, ideally like to stick with nivo though!</p>
  <p>Thanks!</p>