diff --git a/website/react-magma-docs/src/pages/api/chart.mdx b/website/react-magma-docs/src/pages/api/chart.mdx index 10b942469..a92194b2d 100644 --- a/website/react-magma-docs/src/pages/api/chart.mdx +++ b/website/react-magma-docs/src/pages/api/chart.mdx @@ -4,23 +4,29 @@ title: Chart --- import { LeadParagraph } from '../../components/LeadParagraph'; -import '@react-magma/charts/dist/charts.css'; -Magma charts enable you to convey precise and compelling narratives around data through visually appealing and accessible visualizations. + + Magma charts enable you to convey precise and compelling narratives around + data through visually appealing and accessible visualizations. + The CarbonChart component is a wrapper for the [Carbon Design System Simple Charts](https://carbondesignsystem.com/data-visualization/simple-charts). - Important! CarbonChart is imported from{' '} - @react-magma/charts which must be installed as a peer dependency. -

- In addition, you must manually import the styles:
import '@react-magma/charts/dist/charts.css'; + @react-magma/charts which must be installed as a peer + dependency. +
+
+ In addition, you must manually import the styles: +
+ import '@react-magma/charts/dist/charts.css';
We currently support the following chart types: + - AreaChart - StackedAreaChart - DonutChart @@ -33,14 +39,12 @@ We currently support the following chart types: ## Area Chart -Area charts share similarities with line charts, distinguished by the filled areas below the lines, adorned with colors or patterns. Stacked charts, on the other hand, prove valuable for comparing proportional contributions within a category by plotting the relative value each data series contributes to the total. +Area charts share similarities with line charts, distinguished by the filled areas below the lines, adorned with colors or patterns. Stacked charts, on the other hand, prove valuable for comparing proportional contributions within a category by plotting the relative value each data series contributes to the total. ```typescript import React from 'react'; import { Card } from 'react-magma-dom'; import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; export function Example() { const dataSet = [ @@ -115,7 +119,11 @@ export function Example() { return ( - + ); } @@ -127,8 +135,6 @@ export function Example() { import React from 'react'; import { Card } from 'react-magma-dom'; import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; export function Example() { const dataSet = [ @@ -176,13 +182,16 @@ export function Example() { return ( - + ); } ``` - ## Line Chart Line charts depict data at regular intervals, connecting the points with lines. These visualizations are valuable for illustrating trends over time and comparing multiple datasets. @@ -191,8 +200,6 @@ Line charts depict data at regular intervals, connecting the points with lines. import React from 'react'; import { Card } from 'react-magma-dom'; import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; export function Example() { const dataSet = [ @@ -319,7 +326,12 @@ export function Example() { return ( - + ); } @@ -331,8 +343,6 @@ export function Example() { import React from 'react'; import { Card } from 'react-magma-dom'; import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; export function Example() { const dataSet = [ @@ -375,7 +385,12 @@ export function Example() { return ( - + ); } @@ -401,8 +416,7 @@ export function Example() { ], }, required: true, - description: - 'Type of Chart: area, bar, donut, line, etc.', + description: 'Type of Chart: area, bar, donut, line, etc.', }, dataSet: { type: { @@ -417,7 +431,8 @@ export function Example() { name: 'object', }, required: true, - description: 'For a complete list of options, see Carbon Charts documentation', + description: + 'For a complete list of options, see Carbon Charts documentation', defaultValue: '{}', }, isInverse: { @@ -427,7 +442,6 @@ export function Example() { required: false, defaultValue: false, }, - }} />