Commit 9ce951c

authored

docs: created area chart example (#1050)

1 parent 45b7091 commit 9ce951cCopy full SHA for 9ce951c

File tree

+109

-0

lines changed

+109

-0

lines changed

Lines changed: 57 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,57 @@`
	`1`	`+import React from 'react';`
	`2`	`+import {`
	`3`	`+ Chart as ChartJS,`
	`4`	`+ CategoryScale,`
	`5`	`+ LinearScale,`
	`6`	`+ PointElement,`
	`7`	`+ LineElement,`
	`8`	`+ Title,`
	`9`	`+ Tooltip,`
	`10`	`+ Filler,`
	`11`	`+ Legend,`
	`12`	`+} from 'chart.js';`
	`13`	`+import { Line } from 'react-chartjs-2';`
	`14`	`+import faker from 'faker';`
	`15`	`+`
	`16`	`+ChartJS.register(`
	`17`	`+ CategoryScale,`
	`18`	`+ LinearScale,`
	`19`	`+ PointElement,`
	`20`	`+ LineElement,`
	`21`	`+ Title,`
	`22`	`+ Tooltip,`
	`23`	`+ Filler,`
	`24`	`+ Legend`
	`25`	`+);`
	`26`	`+`
	`27`	`+export const options = {`
	`28`	`+ responsive: true,`
	`29`	`+ plugins: {`
	`30`	`+ legend: {`
	`31`	`+ position: 'top' as const,`
	`32`	`+ },`
	`33`	`+ title: {`
	`34`	`+ display: true,`
	`35`	`+ text: 'Chart.js Line Chart',`
	`36`	`+ },`
	`37`	`+ },`
	`38`	`+};`
	`39`	`+`
	`40`	`+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];`
	`41`	`+`
	`42`	`+export const data = {`
	`43`	`+ labels,`
	`44`	`+ datasets: [`
	`45`	`+ {`
	`46`	`+ fill: true,`
	`47`	`+ label: 'Dataset 2',`
	`48`	`+ data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),`
	`49`	`+ borderColor: 'rgb(53, 162, 235)',`
	`50`	`+ backgroundColor: 'rgba(53, 162, 235, 0.5)',`
	`51`	`+ },`
	`52`	`+ ],`
	`53`	`+};`
	`54`	`+`
	`55`	`+export function App() {`
	`56`	`+ return <Line options={options} data={data} />;`
	`57`	`+}`

Lines changed: 7 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,7 @@`
	`1`	`+import React from 'react';`
	`2`	`+import { createRoot } from 'react-dom/client';`
	`3`	`+`
	`4`	`+import { App } from './App';`
	`5`	`+`
	`6`	`+const rootElement = document.getElementById('root');`
	`7`	`+createRoot(rootElement).render(<App />);`

Lines changed: 17 additions & 0 deletions

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+---`
	`2`	`+description: Example of area chart in react-chartjs-2.`
	`3`	`+tags:`
	`4`	`+ - Area Chart`
	`5`	`+---`
	`6`	`+`
	`7`	`+import ContextProvider from '../../src/components/ContextProvider';`
	`8`	`+`
	`9`	`+# Area Chart`
	`10`	`+`
	`11`	`+<ContextProvider>`
	`12`	`+ {({ branch, theme }) => (`
	`13`	`+ <iframe`
	`14`	+ src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/line/area?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
	`15`	`+ style={{`
	`16`	`+ width: '100%',`
	`17`	`+ height: '500px',`
	`18`	`+ border: 0,`
	`19`	`+ borderRadius: '4px',`
	`20`	`+ overflow: 'hidden',`
	`21`	`+ }}`
	`22`	`+ title='reactchartjs/react-chartjs-2 usage example'`
	`23`	`+ allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'`
	`24`	`+ sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'`
	`25`	`+ ></iframe>`
	`26`	`+ )}`
	`27`	`+</ContextProvider>`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ exports.docs = [`
`3`	`3`	`{ title: 'Horizontal Bar Chart', slug: '/examples/horizontal-bar-chart' },`
`4`	`4`	`{ title: 'Stacked Bar Chart', slug: '/examples/stacked-bar-chart' },`
`5`	`5`	`{ title: 'Grouped Bar Chart', slug: '/examples/grouped-bar-chart' },`
	`6`	`+ { title: 'Area Chart', slug: '/examples/area-chart' },`
`6`	`7`	`{ title: 'Line Chart', slug: '/examples/line-chart' },`
`7`	`8`	`{ title: 'Multiaxis Line Chart', slug: '/examples/multiaxis-line-chart' },`
`8`	`9`	`{ title: 'Pie Chart', slug: '/examples/pie-chart' },`

Comments

(0)