Skip to content

Commit 10727fe

Browse files
tannerlinsleytannerlinsley
committed
Update README.md
1 parent e212c8e commit 10727fe

File tree

1 file changed

+131
-27
lines changed

1 file changed

+131
-27
lines changed

‎README.md‎

Lines changed: 131 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,11 @@ Simple, immersive and interactive charts for React
2424
</a>
2525
<br />
2626
<br />
27-
<a href="https://patreon.com/tannerlinsley">
28-
<img width="180" alt="" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/become-a-patron.png" />
29-
</a>
3027

3128
Enjoy this library? Try them all! [React Table](https://github.com/tannerlinsley/react-table), [React Query](https://github.com/tannerlinsley/react-query), [React Form](https://github.com/tannerlinsley/react-form)
3229

30+
### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/)
31+
3332
## Features
3433

3534
- Line, Bar, Bubble, & Area Charts
@@ -38,6 +37,75 @@ Enjoy this library? Try them all! [React Table](https://github.com/tannerlinsley
3837
- Fully Declarative
3938
- Flexible data model
4039

40+
## Github Sponsors
41+
42+
This library is being built and maintained by me, @tannerlinsley and I am always in need of more support to keep this project afloat. If you would like to get additional support, add your logo or name on this README, or simply just contribute to my open source Sponsorship goal, [visit my Github Sponsors page!](https://github.com/sponsors/tannerlinsley/)
43+
44+
[![Diamond Sponsors](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/diamond.png)](https://github.com/sponsors/tannerlinsley)
45+
46+
<table>
47+
<tbody>
48+
<tr>
49+
<td>
50+
<a href="https://github.com/sponsors/tannerlinsley" target="_blank">
51+
Get Your Logo Here!
52+
</a>
53+
</td>
54+
</tr>
55+
</tbody>
56+
</table>
57+
58+
[![Gold Sponsors](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/gold.png)](https://github.com/sponsors/tannerlinsley)
59+
60+
<table>
61+
<tbody>
62+
<tr>
63+
<td>
64+
<a href="https://github.com/sponsors/tannerlinsley" target="_blank">
65+
Get Your Logo Here!
66+
</a>
67+
</td>
68+
</tr>
69+
</tbody>
70+
</table>
71+
72+
[![Silver Sponsors](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/silver.png)](https://github.com/sponsors/tannerlinsley)
73+
74+
<table>
75+
<tbody>
76+
<tr>
77+
<td>
78+
<a href="https://nozzle.io" target="_blank">
79+
<img width='225' src="https://nozzle.io/img/logo-blue.png" alt="Nozzle - Google Keyword Rank Tracker" />
80+
</a>
81+
</td>
82+
</tbody>
83+
</table>
84+
85+
[![Bronze Sponsors](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/bronze.png)](https://github.com/sponsors/tannerlinsley)
86+
87+
<table>
88+
<tbody>
89+
<tr>
90+
<td>
91+
<a href="https://github.com/sponsors/tannerlinsley" target="_blank">
92+
Get Your Logo Here!
93+
</a>
94+
</td>
95+
</tr>
96+
</tbody>
97+
</table>
98+
99+
[![Supporters](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/supporters.png)](https://github.com/sponsors/tannerlinsley)
100+
101+
- [Become a Supporter!](https://github.com/sponsors/tannerlinsley/)
102+
103+
[![Fans](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/fans.png)](https://github.com/sponsors/tannerlinsley)
104+
105+
- [Become a Fan!](https://github.com/sponsors/tannerlinsley/)
106+
107+
### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/)
108+
41109
## Demos
42110

43111
- [react-charts.js.org](https://react-charts.js.org)
@@ -78,20 +146,32 @@ function MyChart() {
78146
() => [
79147
{
80148
label: 'Series 1',
81-
data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
149+
data: [
150+
[0, 1],
151+
[1, 2],
152+
[2, 4],
153+
[3, 2],
154+
[4, 7],
155+
],
82156
},
83157
{
84158
label: 'Series 2',
85-
data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
86-
}
159+
data: [
160+
[0, 3],
161+
[1, 1],
162+
[2, 5],
163+
[3, 6],
164+
[4, 4],
165+
],
166+
},
87167
],
88168
[]
89169
)
90170

91171
const axes = React.useMemo(
92172
() => [
93173
{ primary: true, type: 'linear', position: 'bottom' },
94-
{ type: 'linear', position: 'left' }
174+
{ type: 'linear', position: 'left' },
95175
],
96176
[]
97177
)
@@ -102,7 +182,7 @@ function MyChart() {
102182
<div
103183
style={{
104184
width: '400px',
105-
height: '300px'
185+
height: '300px',
106186
}}
107187
>
108188
<Chart data={data} axes={axes} />
@@ -209,24 +289,36 @@ function MyChart() {
209289
() => [
210290
{
211291
label: 'Series 1',
212-
data: [{ x: 1, y: 10 }, { x: 2, y: 10 }, { x: 3, y: 10 }]
292+
data: [
293+
{ x: 1, y: 10 },
294+
{ x: 2, y: 10 },
295+
{ x: 3, y: 10 },
296+
],
213297
},
214298
{
215299
label: 'Series 2',
216-
data: [{ x: 1, y: 10 }, { x: 2, y: 10 }, { x: 3, y: 10 }]
300+
data: [
301+
{ x: 1, y: 10 },
302+
{ x: 2, y: 10 },
303+
{ x: 3, y: 10 },
304+
],
217305
},
218306
{
219307
label: 'Series 3',
220-
data: [{ x: 1, y: 10 }, { x: 2, y: 10 }, { x: 3, y: 10 }]
221-
}
308+
data: [
309+
{ x: 1, y: 10 },
310+
{ x: 2, y: 10 },
311+
{ x: 3, y: 10 },
312+
],
313+
},
222314
],
223315
[]
224316
)
225317

226318
const axes = React.useMemo(
227319
() => [
228320
{ primary: true, type: 'linear', position: 'bottom' },
229-
{ type: 'linear', position: 'left' }
321+
{ type: 'linear', position: 'left' },
230322
],
231323
[]
232324
)
@@ -235,7 +327,7 @@ function MyChart() {
235327
<div
236328
style={{
237329
width: '400px',
238-
height: '300px'
330+
height: '300px',
239331
}}
240332
>
241333
<Chart data={data} axes={axes} />
@@ -250,17 +342,29 @@ In the following example, there is no need to use any accessors. The **default**
250342
function MyChart() {
251343
const data = React.useMemo(
252344
() => [
253-
[[1, 10], [2, 10], [3, 10]],
254-
[[1, 10], [2, 10], [3, 10]],
255-
[[1, 10], [2, 10], [3, 10]]
345+
[
346+
[1, 10],
347+
[2, 10],
348+
[3, 10],
349+
],
350+
[
351+
[1, 10],
352+
[2, 10],
353+
[3, 10],
354+
],
355+
[
356+
[1, 10],
357+
[2, 10],
358+
[3, 10],
359+
],
256360
],
257361
[]
258362
)
259363

260364
const axes = React.useMemo(
261365
() => [
262366
{ primary: true, type: 'linear', position: 'bottom' },
263-
{ type: 'linear', position: 'left' }
367+
{ type: 'linear', position: 'left' },
264368
],
265369
[]
266370
)
@@ -269,7 +373,7 @@ function MyChart() {
269373
<div
270374
style={{
271375
width: '400px',
272-
height: '300px'
376+
height: '300px',
273377
}}
274378
>
275379
<Chart data={data} axes={axes} />
@@ -293,8 +397,8 @@ function MyChart() {
293397
lines: [
294398
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] },
295399
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] },
296-
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] }
297-
]
400+
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] },
401+
],
298402
}),
299403
[]
300404
)
@@ -318,7 +422,7 @@ function MyChart() {
318422
<div
319423
style={{
320424
width: '400px',
321-
height: '300px'
425+
height: '300px',
322426
}}
323427
>
324428
<Chart
@@ -347,8 +451,8 @@ function MyChart() {
347451
specialLabel: 'Hello World!',
348452
data: [
349453
//...
350-
]
351-
}
454+
],
455+
},
352456
],
353457
[]
354458
)
@@ -359,7 +463,7 @@ function MyChart() {
359463
<div
360464
style={{
361465
width: '400px',
362-
height: '300px'
466+
height: '300px',
363467
}}
364468
>
365469
<Chart data={data} getLabel={getLabel} />
@@ -390,7 +494,7 @@ function MyChart() {
390494
const axes = React.useMemo(
391495
() => [
392496
{ primary: true, type: 'time', position: 'bottom' },
393-
{ type: 'linear', position: 'left' }
497+
{ type: 'linear', position: 'left' },
394498
],
395499
[]
396500
)
@@ -399,7 +503,7 @@ function MyChart() {
399503
<div
400504
style={{
401505
width: '400px',
402-
height: '300px'
506+
height: '300px',
403507
}}
404508
>
405509
<Chart axes={axes} />

0 commit comments

Comments
 (0)