Assign random colors to segments

[stephane-klein]

Hi,

I look for implement Dynamically Allocate Colors in my project with React minimal pie chart.

Have you an exemple?

What do you think to add a Dynamically Allocate Colors example in storybook?

Best regards,
Stéphane

[toomuchdesign]

Hi @stephane-klein,
I don't really get what Dynamically Allocate Colors mean. Could you please help me with an example?

Greetings

[stephane-klein]

Could you please help me with an example?

If I use:

import { PieChart } from 'react-minimal-pie-chart';

<PieChart
  data={[
    { title: 'One', value: 10 },
    { title: 'Two', value: 15 },
    { title: 'Three', value: 20 },
  ]}
/>;

PieChart set random colors automatically.

[toomuchdesign]

I see. There's currently no such feature. data[].color is a required property.

[kalzoo]

FWIW to @stephane-klein and anyone seeing this later, I like a little snippet from older Material UI docs (https://mui.com/material-ui/react-avatar/#main-content):

export function stringToColor(string: string) {
  let hash = 0;
  let i;

  /* eslint-disable no-bitwise */
  for (i = 0; i < string.length; i += 1) {
    hash = string.charCodeAt(i) + ((hash << 5) - hash);
  }

  let color = "#";

  for (i = 0; i < 3; i += 1) {
    const value = (hash >> (i * 8)) & 0xff;
    color += `00${value.toString(16)}`.substr(-2);
  }
  /* eslint-enable no-bitwise */

  return color;
}