Colors - Reaviz

unifyviz

#4C86FF

#40D3F4

#40E5D1

#9152EE

#A840E8

#80CE5B

#AADC40

#D740BE

#EE4094

#E84045

#F8A340

#FFD440

unifyvizwarm

#FFD440

#F8A340

#E84045

unify8Colors

#4c86ff

#4698f3

#40a8e7

#3ab7dd

#35c5d2

#30d3c8

#2be1bf

#26efb5

cybertron

#2d60e8

#2c77e0

#2b8dd8

#2aa1d1

#29b5ca

#28c8c3

#27dcbc

#26efb5

OrRd

#fff7ec

#fee8c8

#fdd49e

#fdbb84

#fc8d59

#ef6548

#d7301f

#b30000

#7f0000

PuBu

#fff7fb

#ece7f2

#d0d1e6

#a6bddb

#74a9cf

#3690c0

#0570b0

#045a8d

#023858

BuPu

#f7fcfd

#e0ecf4

#bfd3e6

#9ebcda

#8c96c6

#8c6bb1

#88419d

#810f7c

#4d004b

Oranges

#fff5eb

#fee6ce

#fdd0a2

#fdae6b

#fd8d3c

#f16913

#d94801

#a63603

#7f2704

BuGn

#f7fcfd

#e5f5f9

#ccece6

#99d8c9

#66c2a4

#41ae76

#238b45

#006d2c

#00441b

YlOrBr

#ffffe5

#fff7bc

#fee391

#fec44f

#fe9929

#ec7014

#cc4c02

#993404

#662506

YlGn

#ffffe5

#f7fcb9

#d9f0a3

#addd8e

#78c679

#41ab5d

#238443

#006837

#004529

Reds

#fff5f0

#fee0d2

#fcbba1

#fc9272

#fb6a4a

#ef3b2c

#cb181d

#a50f15

#67000d

RdPu

#fff7f3

#fde0dd

#fcc5c0

#fa9fb5

#f768a1

#dd3497

#ae017e

#7a0177

#49006a

Greens

#f7fcf5

#e5f5e0

#c7e9c0

#a1d99b

#74c476

#41ab5d

#238b45

#006d2c

#00441b

YlGnBu

#ffffd9

#edf8b1

#c7e9b4

#7fcdbb

#41b6c4

#1d91c0

#225ea8

#253494

#081d58

Purples

#fcfbfd

#efedf5

#dadaeb

#bcbddc

#9e9ac8

#807dba

#6a51a3

#54278f

#3f007d

GnBu

#f7fcf0

#e0f3db

#ccebc5

#a8ddb5

#7bccc4

#4eb3d3

#2b8cbe

#0868ac

#084081

Greys

#ffffff

#f0f0f0

#d9d9d9

#bdbdbd

#969696

#737373

#525252

#252525

#000000

YlOrRd

#ffffcc

#ffeda0

#fed976

#feb24c

#fd8d3c

#fc4e2a

#e31a1c

#bd0026

#800026

PuRd

#f7f4f9

#e7e1ef

#d4b9da

#c994c7

#df65b0

#e7298a

#ce1256

#980043

#67001f

Blues

#f7fbff

#deebf7

#c6dbef

#9ecae1

#6baed6

#4292c6

#2171b5

#08519c

#08306b

PuBuGn

#fff7fb

#ece2f0

#d0d1e6

#a6bddb

#67a9cf

#3690c0

#02818a

#016c59

#014636

Viridis

#440154

#482777

#3f4a8a

#31678e

#26838f

#1f9d8a

#6cce5a

#b6de2b

#fee825

Spectral

#9e0142

#d53e4f

#f46d43

#fdae61

#fee08b

#ffffbf

#e6f598

#abdda4

#66c2a5

#3288bd

#5e4fa2

RdYlGn

#a50026

#d73027

#f46d43

#fdae61

#fee08b

#ffffbf

#d9ef8b

#a6d96a

#66bd63

#1a9850

#006837

RdBu

#67001f

#b2182b

#d6604d

#f4a582

#fddbc7

#f7f7f7

#d1e5f0

#92c5de

#4393c3

#2166ac

#053061

PiYG

#8e0152

#c51b7d

#de77ae

#f1b6da

#fde0ef

#f7f7f7

#e6f5d0

#b8e186

#7fbc41

#4d9221

#276419

PRGn

#40004b

#762a83

#9970ab

#c2a5cf

#e7d4e8

#f7f7f7

#d9f0d3

#a6dba0

#5aae61

#1b7837

#00441b

RdYlBu

#a50026

#d73027

#f46d43

#fdae61

#fee090

#ffffbf

#e0f3f8

#abd9e9

#74add1

#4575b4

#313695

BrBG

#543005

#8c510a

#bf812d

#dfc27d

#f6e8c3

#f5f5f5

#c7eae5

#80cdc1

#35978f

#01665e

#003c30

RdGy

#67001f

#b2182b

#d6604d

#f4a582

#fddbc7

#ffffff

#e0e0e0

#bababa

#878787

#4d4d4d

#1a1a1a

PuOr

#7f3b08

#b35806

#e08214

#fdb863

#fee0b6

#f7f7f7

#d8daeb

#b2abd2

#8073ac

#542788

#2d004b

Set2

#66c2a5

#fc8d62

#8da0cb

#e78ac3

#a6d854

#ffd92f

#e5c494

#b3b3b3

Accent

#7fc97f

#beaed4

#fdc086

#ffff99

#386cb0

#f0027f

#bf5b17

#666666

Set1

#e41a1c

#377eb8

#4daf4a

#984ea3

#ff7f00

#ffff33

#a65628

#f781bf

#999999

Set3

#8dd3c7

#ffffb3

#bebada

#fb8072

#80b1d3

#fdb462

#b3de69

#fccde5

#d9d9d9

#bc80bd

#ccebc5

#ffed6f

Dark2

#1b9e77

#d95f02

#7570b3

#e7298a

#66a61e

#e6ab02

#a6761d

#666666

Paired

#a6cee3

#1f78b4

#b2df8a

#33a02c

#fb9a99

#e31a1c

#fdbf6f

#ff7f00

#cab2d6

#6a3d9a

#ffff99

#b15928

Pastel2

#b3e2cd

#fdcdac

#cbd5e8

#f4cae4

#e6f5c9

#fff2ae

#f1e2cc

#cccccc

Pastel1

#fbb4ae

#b3cde3

#ccebc5

#decbe4

#fed9a6

#ffffcc

#e5d8bd

#fddaec

#f2f2f2

orrd

#fff7ec

#fee8c8

#fdd49e

#fdbb84

#fc8d59

#ef6548

#d7301f

#b30000

#7f0000

pubu

#fff7fb

#ece7f2

#d0d1e6

#a6bddb

#74a9cf

#3690c0

#0570b0

#045a8d

#023858

bupu

#f7fcfd

#e0ecf4

#bfd3e6

#9ebcda

#8c96c6

#8c6bb1

#88419d

#810f7c

#4d004b

oranges

#fff5eb

#fee6ce

#fdd0a2

#fdae6b

#fd8d3c

#f16913

#d94801

#a63603

#7f2704

bugn

#f7fcfd

#e5f5f9

#ccece6

#99d8c9

#66c2a4

#41ae76

#238b45

#006d2c

#00441b

ylorbr

#ffffe5

#fff7bc

#fee391

#fec44f

#fe9929

#ec7014

#cc4c02

#993404

#662506

ylgn

#ffffe5

#f7fcb9

#d9f0a3

#addd8e

#78c679

#41ab5d

#238443

#006837

#004529

reds

#fff5f0

#fee0d2

#fcbba1

#fc9272

#fb6a4a

#ef3b2c

#cb181d

#a50f15

#67000d

rdpu

#fff7f3

#fde0dd

#fcc5c0

#fa9fb5

#f768a1

#dd3497

#ae017e

#7a0177

#49006a

greens

#f7fcf5

#e5f5e0

#c7e9c0

#a1d99b

#74c476

#41ab5d

#238b45

#006d2c

#00441b

ylgnbu

#ffffd9

#edf8b1

#c7e9b4

#7fcdbb

#41b6c4

#1d91c0

#225ea8

#253494

#081d58

purples

#fcfbfd

#efedf5

#dadaeb

#bcbddc

#9e9ac8

#807dba

#6a51a3

#54278f

#3f007d

gnbu

#f7fcf0

#e0f3db

#ccebc5

#a8ddb5

#7bccc4

#4eb3d3

#2b8cbe

#0868ac

#084081

greys

#ffffff

#f0f0f0

#d9d9d9

#bdbdbd

#969696

#737373

#525252

#252525

#000000

ylorrd

#ffffcc

#ffeda0

#fed976

#feb24c

#fd8d3c

#fc4e2a

#e31a1c

#bd0026

#800026

purd

#f7f4f9

#e7e1ef

#d4b9da

#c994c7

#df65b0

#e7298a

#ce1256

#980043

#67001f

blues

#f7fbff

#deebf7

#c6dbef

#9ecae1

#6baed6

#4292c6

#2171b5

#08519c

#08306b

pubugn

#fff7fb

#ece2f0

#d0d1e6

#a6bddb

#67a9cf

#3690c0

#02818a

#016c59

#014636

viridis

#440154

#482777

#3f4a8a

#31678e

#26838f

#1f9d8a

#6cce5a

#b6de2b

#fee825

spectral

#9e0142

#d53e4f

#f46d43

#fdae61

#fee08b

#ffffbf

#e6f598

#abdda4

#66c2a5

#3288bd

#5e4fa2

rdylgn

#a50026

#d73027

#f46d43

#fdae61

#fee08b

#ffffbf

#d9ef8b

#a6d96a

#66bd63

#1a9850

#006837

rdbu

#67001f

#b2182b

#d6604d

#f4a582

#fddbc7

#f7f7f7

#d1e5f0

#92c5de

#4393c3

#2166ac

#053061

piyg

#8e0152

#c51b7d

#de77ae

#f1b6da

#fde0ef

#f7f7f7

#e6f5d0

#b8e186

#7fbc41

#4d9221

#276419

prgn

#40004b

#762a83

#9970ab

#c2a5cf

#e7d4e8

#f7f7f7

#d9f0d3

#a6dba0

#5aae61

#1b7837

#00441b

rdylbu

#a50026

#d73027

#f46d43

#fdae61

#fee090

#ffffbf

#e0f3f8

#abd9e9

#74add1

#4575b4

#313695

brbg

#543005

#8c510a

#bf812d

#dfc27d

#f6e8c3

#f5f5f5

#c7eae5

#80cdc1

#35978f

#01665e

#003c30

rdgy

#67001f

#b2182b

#d6604d

#f4a582

#fddbc7

#ffffff

#e0e0e0

#bababa

#878787

#4d4d4d

#1a1a1a

puor

#7f3b08

#b35806

#e08214

#fdb863

#fee0b6

#f7f7f7

#d8daeb

#b2abd2

#8073ac

#542788

#2d004b

set2

#66c2a5

#fc8d62

#8da0cb

#e78ac3

#a6d854

#ffd92f

#e5c494

#b3b3b3

accent

#7fc97f

#beaed4

#fdc086

#ffff99

#386cb0

#f0027f

#bf5b17

#666666

set1

#e41a1c

#377eb8

#4daf4a

#984ea3

#ff7f00

#ffff33

#a65628

#f781bf

#999999

set3

#8dd3c7

#ffffb3

#bebada

#fb8072

#80b1d3

#fdb462

#b3de69

#fccde5

#d9d9d9

#bc80bd

#ccebc5

#ffed6f

dark2

#1b9e77

#d95f02

#7570b3

#e7298a

#66a61e

#e6ab02

#a6761d

#666666

paired

#a6cee3

#1f78b4

#b2df8a

#33a02c

#fb9a99

#e31a1c

#fdbf6f

#ff7f00

#cab2d6

#6a3d9a

#ffff99

#b15928

pastel2

#b3e2cd

#fdcdac

#cbd5e8

#f4cae4

#e6f5c9

#fff2ae

#f1e2cc

#cccccc

pastel1

#fbb4ae

#b3cde3

#ccebc5

#decbe4

#fed9a6

#ffffcc

#e5d8bd

#fddaec

#f2f2f2

Using Color Schemes

To apply a color scheme to your chart, simply set the colorScheme attribute to the desired scheme. For example:


import { BarChart } from 'reaviz';
 
const data = [
  { key: 'DLP', data: 13 },
  { key: 'SIEM', data: 2 },
  { key: 'Endpoint', data: 7 }
];
<BarChart data={data} colorScheme="unifyviz" />;

This will render your chart using the “unifyviz” color scheme.

Using callback for Colors

You can also use a function callback to determine the color of each data point. For example:


import { BarChart } from 'reaviz';
 
const data = [
  { key: 'DLP', data: 10 },
  { key: 'SIEM', data: 20 },
  { key: 'Endpoint', data: 70 },
  { key: 'Network', data: 40 },
  { key: 'Cloud', data: 30 },
  { key: 'Other', data: 80 }
];
<BarChart
  data={data}
  series={
    <BarSeries colorScheme={(item, index) => (item.data > 50 ? '#418AD7' : '#ACB7C9')}
  />}
/>;

The type for the color scheme is:


type ColorSchemeType =
  | ((data, index: number, active?: any[]) => string)
  | string[]
  | string;

This will render your chart using a function callback to determine the color of each data point.