[xy-chart] How to make AreaSeries filled with a color to transparent gradient?

[RIP21]

How to make my AreaSeries fade down from solid color to fully transparent.

Something close to this one

Literally.... how would you build this one below :D I kinda got one done but it's far from looking like that :)
Code is here: #1000

[RIP21]

I guess the answer is here https://airbnb.io/visx/docs/gradient
But still no acceptable result :) That's why I'm asking :)

[RIP21]

And here is the answer.

Full example:

import React, { useEffect, useMemo } from 'react'
import {
  lightTheme as lt,
  darkTheme as dt,
  Grid,
  AreaSeries,
  Axis,
  XYChart,
  Tooltip,
  buildChartTheme,
} from '@visx/xychart'
import { ThemeConfig } from '@visx/xychart/lib/theme/buildChartTheme'
import { curveMonotoneX } from '@visx/curve'
import { LinearGradient } from '@visx/gradient'
import { ParentSize } from '@visx/responsive'
import { Box, useColorMode, Stack } from '@chakra-ui/react'
import { css } from '@emotion/css'
import { MetricHistoryPoint } from '__generated__/graphql-types.generated'

const dateScaleConfig = { type: 'band', paddingInner: 1 } as const
const moneyScaleConfig = { type: 'linear' } as const

const darkTheme = buildChartTheme(({
  ...dt,
  colors: ['#109CF1'],
} as unknown) as ThemeConfig)

const lightTheme = buildChartTheme(({
  ...lt,
  colors: ['#109CF1'],
} as unknown) as ThemeConfig)

const lineStyle = css`
  stroke-width: 3;
`

export const DashboardGraph = ({ data }: { data: MetricHistoryPoint[] }) => {
  const config = useMemo(
    () => ({
      x: dateScaleConfig,
      y: moneyScaleConfig,
    }),
    [],
  )
  const { colorMode } = useColorMode()
  const theme = colorMode === 'light' ? lightTheme : darkTheme

  useEffect(() => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('scroll'))
    }, 300)
  })

  return (
    <ParentSize>
      {({ width }) => (
        <XYChart
          theme={theme}
          xScale={config.x}
          yScale={config.y}
          height={300}
          width={width}
        >
          <LinearGradient
            id="area-gradient"
            from="#109CF1"
            to="#109CF1"
            toOpacity={0.1}
          />
          <Grid
            rows
            columns={false}
            strokeDasharray="10, 5"
            // @ts-expect-error
            strokeOpacity={0.3}
          />
          <AreaSeries
            dataKey="Cash in"
            data={data}
            fillOpacity={0.4}
            xAccessor={(it) => it.date}
            yAccessor={(it) => it.value}
            fill="url(#area-gradient)"
            stroke="url(#area-gradient)"
            lineProps={{
              className: lineStyle,
            }}
            curve={curveMonotoneX}
          />
          <Axis
            orientation="bottom"
            strokeWidth={0}
            numTicks={5}
            hideAxisLine
            hideTicks
          />
          <Axis orientation="left" numTicks={5} hideAxisLine hideTicks />
          <Tooltip<{ date: string; value: number }>
            showVerticalCrosshair
            snapTooltipToDatumX
            snapTooltipToDatumY
            verticalCrosshairStyle={{
              strokeOpacity: 0.4,
            }}
            showSeriesGlyphs
            renderTooltip={({ tooltipData }) => (
              <Stack borderRadius={4}>
                <Box>{tooltipData?.nearestDatum?.datum.date}</Box>
                <Box>{tooltipData?.nearestDatum?.datum.value}$</Box>
              </Stack>
            )}
          />
        </XYChart>
      )}
    </ParentSize>
  )
}

Main parts are:

const darkTheme = buildChartTheme(({
  ...dt,
  colors: ['#109CF1'],
} as unknown) as ThemeConfig)

const lightTheme = buildChartTheme(({
  ...lt,
  colors: ['#109CF1'],
} as unknown) as ThemeConfig)

const lineStyle = css`
  stroke-width: 3;
`

          <LinearGradient
            id="area-gradient"
            from="#109CF1"
            to="#109CF1"
            toOpacity={0.1}
          />

and

          <AreaSeries
            data={data}
            fillOpacity={0.4}
            xAccessor={(it) => it.date}
            yAccessor={(it) => it.value}
            fill="url(#area-gradient)"
            stroke="url(#area-gradient)"
            lineProps={{
              className: lineStyle,
            }}
            curve={curveMonotoneX}
          />

[williaster]

yes! I would just add that

• ids for Gradients (and Patterns) should be unique on the page, otherwise you may have clashing of styles between charts if you have multiple on a page
• the ability to do this for other XYChart series types (BarSeries/GlyphSeries/BarStack/BarGroup) was added in new(xychart): add colorAccessor to relevant series #1005 via the colorAccessor prop

[RIP21]

You mean that if I would have a BarChart I will be able to override concrete bar color based on the click or whatever logic?

[williaster]

Previously you could only control the color of BarSeries/GlyphSeries/BarStack/BarGroup via the chart theme which is inconvenient and not very flexible. That PR adds colorAccessor as an easier way to set colors (whether they are gradients or patterns, or just solid fills), for all bars or glyphs, or different colors per-data point.

[williaster]

I would also note in your example that you don't need ParentSize, XYChart itself uses ParentSize if width and height are not specified, so it supports dynamic width if you set a fixed height.

[RIP21]

@williaster BTW, I think I found a bug.
Here is my graph code (still needs some polish and proper modularization to files :D now all in one file, but it's good for reporting I guess)

Click to expand:

import React, { useEffect, useMemo } from 'react'
import {
  lightTheme as lt,
  darkTheme as dt,
  Grid,
  AreaSeries,
  Axis,
  XYChart,
  Tooltip,
  buildChartTheme,
} from '@visx/xychart'
import { ThemeConfig } from '@visx/xychart/lib/theme/buildChartTheme'
import { curveMonotoneX } from '@visx/curve'
import { LinearGradient } from '@visx/gradient'
import { Box, useColorMode, Stack, useBreakpointValue } from '@chakra-ui/react'
import { ParentSize } from '@visx/responsive'
import { css } from '@emotion/css'
import { MetricHistoryPoint } from '__generated__/graphql-types.generated'
import { formatMoney } from 'packlets/utils'

const dateScaleConfig = { type: 'band', paddingInner: 0.9 } as const
const moneyScaleConfig = { type: 'linear' } as const

const darkTheme = buildChartTheme(({
  ...dt,
  colors: ['#109CF1'],
} as unknown) as ThemeConfig)

const lightTheme = buildChartTheme(({
  ...lt,
  colors: ['#109CF1'],
} as unknown) as ThemeConfig)

const lineStyle = css`
  stroke-width: 3;
`

export const DashboardGraph = ({ data }: { data: MetricHistoryPoint[] }) => {
  const config = useMemo(
    () => ({
      x: dateScaleConfig,
      y: moneyScaleConfig,
    }),
    [],
  )
  const { colorMode } = useColorMode()
  const theme = colorMode === 'light' ? lightTheme : darkTheme

  useEffect(() => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('scroll'))
    }, 300)
  })

  const xTicks = useBreakpointValue({ base: 3, xl: 5 })

  return (
    <ParentSize>
      {({ width }) => (
        <XYChart
          theme={theme}
          xScale={config.x}
          yScale={config.y}
          height={300}
          width={width - 16}
        >
          <LinearGradient
            id="area-gradient"
            from="#109CF1"
            to="#109CF1"
            toOpacity={0.1}
          />
          <Grid
            rows
            columns={false}
            strokeDasharray="10, 5"
            // @ts-expect-error
            strokeOpacity={0.3}
          />
          <AreaSeries
            dataKey="Cash in"
            data={data}
            fillOpacity={0.4}
            xAccessor={(it) => it.date}
            yAccessor={(it) => it.value}
            fill="url(#area-gradient)"
            stroke="url(#area-gradient)"
            lineProps={{
              className: lineStyle,
            }}
            curve={curveMonotoneX}
          />
          <Axis
            orientation="bottom"
            strokeWidth={0}
            numTicks={xTicks}
            hideAxisLine
            hideTicks
          />
          <Axis orientation="left" numTicks={5} hideAxisLine hideTicks />
          <Tooltip<{ date: string; value: number }>
            showVerticalCrosshair
            snapTooltipToDatumX
            snapTooltipToDatumY
            verticalCrosshairStyle={{
              strokeOpacity: 0.4,
            }}
            showSeriesGlyphs
            glyphStyle={{
              r: 4,
              fill: colorMode === 'light' ? 'white' : 'black',
              strokeWidth: 1.5,
              stroke: '#109CF1',
            }}
            renderTooltip={({ tooltipData }) => (
              <Stack borderRadius={4}>
                <Box>{tooltipData?.nearestDatum?.datum.date}</Box>
                <Box>{formatMoney(tooltipData?.nearestDatum?.datum.value ?? 0)}</Box>
              </Stack>
            )}
          />
        </XYChart>
      )}
    </ParentSize>
  )
}

In order to have my graphs to resize I have to deduct padding of the div that holds XYChart (I guess it's div -> XY Chart generated div -> actual SVGs)
So basically padding of the block that holds component above inside.

Here is how it looks when I add this width - 16

And here when I don't add that. I'm getting horizontal scrolling after page refresh and no resize. Note that 2 graphs above are in regular display: flex, and 2x2 graphs at the bottom are in display: grid.