Color 2 Areas underlines in Recharts without mixing colors caused by the Opacity

Hadi Houssainy — Tue, 07 Sep 2021 10:17:51 +0000

This is how to separate the charts areas color when dealing with recharts,

I'm using react with material-ui theme ( the useTheme line 🙄 )

U need to create 3 areas for the 2 lines,
this method work only when u know that 1 line is always on top

function RevenueChart({ data }: RevenueChartProps) {
  const theme = useTheme();
  return (
    <div style={{ height: 300, width: '100%' }}>
      <ResponsiveContainer>
        <AreaChart
          width={730}
          height={250}
          data={data}
          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
        >
          <XAxis dataKey="name" tick={{ fill: theme.palette.text.hint }} />
          <YAxis tick={{ fill: theme.palette.text.hint }} />
          <CartesianGrid strokeDasharray="3 3" />
          <Area
            activeDot={false}
            dot={false}
            strokeWidth={0}
            type="monotone"
            dataKey="diff"
            stroke={theme.palette.primary.main}
            fillOpacity={0.6}
            fill={lighten(theme.palette.primary.main, 0.2)}
          />
          <Area
            activeDot={{ r: 8, fill: theme.palette.primary.main }}
            strokeWidth={2}
            type="monotone"
            dataKey="incomes"
            stroke={theme.palette.primary.main}
            fillOpacity={0}
            dot
          />
          <Area
            activeDot={{ r: 8, fill: '#ea6b78' }}
            strokeWidth={2}
            type="monotone"
            dataKey="outcomes"
            stroke="#ea6b78"
            fillOpacity={0.6}
            fill={lighten('#ea6b78', 0.2)}
            dot
          />
          <Tooltip content={<CustomContent />} />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

the data prop has the form of:

type data = {
  incomes: Array<Numbers>,
  outcomes: Array<Numbers>,
  diff: Array<Array<Number, Number>>,
}

the incomes & outcomes are clearly just your data,
the diff is an array of arrays, the ith inner array is formed by [ incomes[i], outcomes[i] ] as u can see incomes is on top so it's the start point & outcomes is in the bottom, the end.

the components are created in this form:

<Area
    ...
    strokeWidth={2}
    dataKey="diff"
    fillOpacity={0.6}
    fill={lighten(theme.palette.primary.main, 0.2)}
    ...
    />

the colored area between the lines has no stroke (strokeWidth = 0) but has a fill color (opacity != 0),

<Area
    ...
    strokeWidth={2}
    dataKey="diff"
    fillOpacity={0}
    ...
    />

the top line have no fill color (opacity = 0) but have stroke (strokeWidth != 0),

and the bottom line can have both

The main idea is that Area component can take data as an array of start & end limits

Reboot Windows Shortcut

Hadi Houssainy — Sat, 28 Aug 2021 08:58:41 +0000

Hello,
this is my first post here,
I have Arch Linux installed with windows 10 dual boot & systemd-boot as bootloader

so first u need to check your boot entries:

bootctl list

remember the windows id in the output

then create a new file anywhere in your machine

cd & touch reboot-windows.sh

And add the following code inside the new file

#!/bin/sh
systemctl reboot --boot-loader-entry=auto-windows

here --boot-loader-entry=<your windows id>

launch the script and you will escape to windows!

DEV Community: Hadi Houssainy

Color 2 Areas underlines in Recharts without mixing colors caused by the Opacity

Reboot Windows Shortcut