-
Notifications
You must be signed in to change notification settings - Fork 30
/
theme-fivethirtyeight.ts
99 lines (83 loc) · 1.72 KB
/
theme-fivethirtyeight.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import {Config} from './config';
const markColor = '#30a2da';
const axisColor = '#cbcbcb';
const guideLabelColor = '#999';
const guideTitleColor = '#333';
const backgroundColor = '#f0f0f0';
const blackTitle = '#333';
const fiveThirtyEightTheme: Config = {
arc: {fill: markColor},
area: {fill: markColor},
axis: {
domainColor: axisColor,
grid: true,
gridColor: axisColor,
gridWidth: 1,
labelColor: guideLabelColor,
labelFontSize: 10,
titleColor: guideTitleColor,
tickColor: axisColor,
tickSize: 10,
titleFontSize: 14,
titlePadding: 10,
labelPadding: 4,
},
axisBand: {
grid: false,
},
background: backgroundColor,
group: {
fill: backgroundColor,
},
legend: {
labelColor: blackTitle,
labelFontSize: 11,
padding: 1,
symbolSize: 30,
symbolType: 'square',
titleColor: blackTitle,
titleFontSize: 14,
titlePadding: 10,
},
line: {
stroke: markColor,
strokeWidth: 2,
},
path: {stroke: markColor, strokeWidth: 0.5},
rect: {fill: markColor},
range: {
category: [
'#30a2da',
'#fc4f30',
'#e5ae38',
'#6d904f',
'#8b8b8b',
'#b96db8',
'#ff9e27',
'#56cc60',
'#52d2ca',
'#52689e',
'#545454',
'#9fe4f8',
],
diverging: ['#cc0020', '#e77866', '#f6e7e1', '#d6e8ed', '#91bfd9', '#1d78b5'],
heatmap: ['#d6e8ed', '#cee0e5', '#91bfd9', '#549cc6', '#1d78b5'],
},
point: {
filled: true,
shape: 'circle',
},
shape: {stroke: markColor},
bar: {
binSpacing: 2,
fill: markColor,
stroke: null,
},
title: {
anchor: 'start',
fontSize: 24,
fontWeight: 600,
offset: 20,
},
};
export default fiveThirtyEightTheme;