import React from 'react' import BarGraph from '../_bar_graph' const chartData = [{ name: 'Installation', data: [1475, 200, 3000, 654, 656], }, { name: 'Manufacturing', data: [4434, 524, 2320, 440, 500], }, { name: 'Sales & Distribution', data: [3387, 743, 1344, 434, 440], }, { name: 'Project Development', data: [3227, 878, 999, 780, 1000], }, { name: 'Other', data: [1111, 677, 3245, 500, 200], }] const BarGraphDefault = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="bar-default" subTitle="Source: thesolarfoundation.com" title="Solar Employment Growth by Sector, 2010-2016" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']} yAxisMin={0} {...props} /> </div> ) export default BarGraphDefault
import React from 'react' import { BarGraph } from '../..' const chartData = [{ name: 'Number of Installations', data: [1475, 200, 3000, 654, 656], }] const BarGraphLegend = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="bar-test-2" legend title="Bar Graph with Legend" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']} yAxisMin={0} {...props} /> </div> ) export default BarGraphLegend
align
Type: String | Values: left | center | right (defaults to center)
verticalAlign
Type: String | Values: top | middle | bottom (defaults middle)
layout
Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
x
Type: Number (defaults to 0)
y
Type: Number (defaults to 0)
layout
determines the position of the legend items
layout: proximate
will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
x
offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
y
offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
import React from 'react' import { BarGraph, Title } from '../..' const chartData = [{ name: 'Installation', data: [1475], }, { name: 'Manufacturing', data: [4434], }, { name: 'Sales & Distribution', data: [3387], }, { name: 'Project Development', data: [3227], }, { name: 'Other', data: [1111], }] const BarGraphLegendPosition = (props) => ( <div> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="align | verticalAlign" /> <BarGraph align='right' axisTitle="Number of Employees" chartData={chartData} id="legend-position-bar" legend paddingBottom="sm" title="Alignment of Legend" verticalAlign="top" xAxisCategories={['Jan']} yAxisMin={0} {...props} /> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="layout" /> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="legend-position-bar-1" layout="vertical" legend paddingBottom="sm" paddingTop="sm" title="Layout of Legend" xAxisCategories={['Jan']} yAxisMin={0} {...props} /> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="x | y" /> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="legend-position-bar-2" layout="vertical" legend title="Offset of Legend" x={100} xAxisCategories={['Jan']} y={10} yAxisMin={0} {...props} /> </div> ) export default BarGraphLegendPosition
import React from 'react' import { BarGraph } from '../..' const chartData = [{ name: 'Number of Installations', data: [1475, 200, 3000, 654, 656], }] const BarGraphLegendNonClickable = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="bar-test-3" legend title="Bar Graph with Legend Non Clickable" toggleLegendClick={false} xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']} yAxisMin={0} {...props} /> </div> ) export default BarGraphLegendNonClickable
import React from 'react' import BarGraph from '../_bar_graph' const chartData = [{ name: 'Number of Installations', data: [1475, 200, 3000, 654, 656], }] const BarGraphDefault = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} height="300" id="bar-fixed-height" title="Fixed Height (300px)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> <br /> <br /> <BarGraph axisTitle="Number of Employees" chartData={chartData} height="50%" id="bar-percentage-height" title="Percentage Height (50%)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default BarGraphDefault
A spline can be added by including a separate chart data with the type: 'spline'
attribute.
A color can also be specified for the spline.
import React from 'react' import BarGraph from '../_bar_graph' const chartData = [{ name: 'Number of Installations', data: [1475, 200, 3000, 654, 656], }, { type: 'spline', name: 'Trend Line', data: [1975, 600, 2500, 924, 500], color: '#F9BB00', }] const BarGraphSpline = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="bar-spline" legend title="Bar Graph with Spline" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']} yAxisMin={0} {...props} /> </div> ) export default BarGraphSpline
Custom data colors
allow for color customization to match the needs of business requirements.
Pass the prop colors and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8
in an array. Hex colors are also available eg: #CA0095
import React from 'react' import BarGraph from '../_bar_graph' const chartData = [{ name: 'Installation', data: [1475, 200, 3000, 654, 656], }, { name: 'Manufacturing', data: [4434, 524, 2320, 440, 500], }, { name: 'Sales & Distribution', data: [3387, 743, 1344, 434, 440], }, { name: 'Project Development', data: [3227, 878, 999, 780, 1000], }, { name: 'Other', data: [1111, 677, 3245, 500, 200], }] const BarGraphColors = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']} id="bar-colors" title="Bar Graph with Custom Data Colors" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']} yAxisMin={0} {...props} /> </div> ) export default BarGraphColors
import React from 'react' import CircleChart from '../_circle_chart' const data = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const CircleChartDefault = (props) => ( <div> <CircleChart chartData={data} id="circle-chart-default" {...props} /> </div> ) export default CircleChartDefault
import React, { useState } from 'react' import CircleChart from '../_circle_chart' import Button from '../../pb_button/_button' const CircleChartLiveData = (props) => { const [data, setData] = useState([ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ]) const data2 = [ { name: 'Waiting for Calls', value: 48, }, { name: 'On Call', value: 12, }, { name: 'After call', value: 140, }, ] const updateValue = () => { setData(data2) } return ( <div> <Button onClick={updateValue} text="Update Value" {...props} /> <CircleChart chartData={data} id="circle-chart-live-data" {...props} /> </div> ) } export default CircleChartLiveData
import React from 'react' import CircleChart from '../_circle_chart' const dataRounded = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const CircleChartRounded = (props) => ( <div> <CircleChart chartData={dataRounded} id="default-test-rounded" innerSize="lg" rounded {...props} /> </div> ) export default CircleChartRounded
import React from 'react' import CircleChart from '../_circle_chart' import Title from '../../pb_title/_title' const dataWithABlock = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const CircleChartBlock = (props) => ( <div> <CircleChart chartData={dataWithABlock} id="chart-with-a-block" innerSize="lg" marginTop="xl" rounded {...props} > <Title size={1} tag="div" {...props} > {'83'} </Title> </CircleChart> </div> ) export default CircleChartBlock
Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors
and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8
in an array. Hex colors are also available eg: #CA0095
import React from 'react' import CircleChart from '../_circle_chart' const dataWithColors = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const CircleChartColors = (props) => ( <div> <CircleChart chartData={dataWithColors} colors={['data-6', 'data-4', 'data-2']} id="colors-example" {...props} /> </div> ) export default CircleChartColors
import React from 'react' import CircleChart from '../_circle_chart' const dataWithLabels = [ { name: 'Facebook', value: 2498, }, { name: 'YouTube', value: 2000, }, { name: 'WhatsApp', value: 2000, }, { name: 'Facebook Messenger', value: 1300, }, { name: 'WeChat', value: 1165, }, { name: 'Instagram', value: 1000, }, { name: 'Tik Tok', value: 800, }, ] const CircleChartWithLabels = (props) => ( <div> <CircleChart chartData={dataWithLabels} dataLabels id="with-labels-example" {...props} /> </div> ) export default CircleChartWithLabels
import React from 'react' import CircleChart from '../_circle_chart' const dataWithLegend = [{ name: 'Bugs', value: 8, }, { name: 'Chores', value: 1, }, { name: 'Stories', value: 12, }, ] const CircleChartWithLegendKit = (props) => ( <div> <CircleChart chartData={dataWithLegend} id="with-legend-example" legend {...props} /> </div> ) export default CircleChartWithLegendKit
align
Type: String | Values: left | center | right (defaults to center)
verticalAlign
Type: String | Values: top | middle | bottom (defaults middle)
layout
Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
x
Type: Number (defaults to 0)
y
Type: Number (defaults to 0)
layout
determines the position of the legend items
layout: proximate
will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
x
offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
y
offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
import React from 'react' import CircleChart from '../_circle_chart' import {Title} from '../..' const data = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const dataFirst = [{ name: 'Bugs', value: 8, }, { name: 'Chores', value: 1, }, { name: 'Stories', value: 12, }, ] const dataSecond = [ { name: 'Queued', value: 7, }, { name: 'In Progress', value: 6, }, { name: 'Validation', value: 3, }, { name: 'Done', value: 6, }, ] const CircleChartLegendPosition = (props) => ( <div> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="align | verticalAlign" /> <CircleChart align='right' chartData={data} id="legend-position-circle" legend paddingBottom="sm" title="Alignment of Legend" verticalAlign="top" {...props} /> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="layout" /> <CircleChart chartData={dataFirst} id="legend-position-circle-1" layout="vertical" legend paddingBottom="sm" paddingTop="sm" title="Layout of Legend" {...props} /> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="x | y" /> <CircleChart chartData={dataSecond} id="legend-position-circle-2" layout="vertical" legend title="Offset of Legend" x={100} y={10} {...props} /> </div> ) export default CircleChartLegendPosition
import React from 'react' import CircleChart from '../_circle_chart' const dataWithTitle = [ { name: 'Facebook', value: 2498, }, { name: 'YouTube', value: 2000, }, { name: 'WhatsApp', value: 2000, }, { name: 'Facebook Messenger', value: 1300, }, { name: 'WeChat', value: 1165, }, { name: 'Instagram', value: 1000, }, { name: 'Tik Tok', value: 800, }, ] const CircleChartWithLegendKit = (props) => ( <div> <CircleChart chartData={dataWithTitle} id="with-title-example" title="Active Users on Social Media" {...props} /> </div> ) export default CircleChartWithLegendKit
import React from 'react' import CircleChart from '../_circle_chart' const dataFirst = [ { name: 'Bugs', value: 8, }, { name: 'Chores', value: 1, }, { name: 'Stories', value: 12, }, ] const dataSecond = [ { name: 'Queued', value: 7, }, { name: 'In Progress', value: 6, }, { name: 'Validation', value: 3, }, { name: 'Done', value: 6, }, ] const dataThird = [ { name: '1 Point Tickets', value: 2, }, { name: '3 Point Tickets', value: 5, }, { name: '5 Point Tickets', value: 6, }, { name: '8 Point Tickets', value: 3, }, { name: '13 Point Tickets', value: 1, }, ] const dataFourth = [ { name: 'Facebook', value: 2498, }, { name: 'YouTube', value: 2000, }, { name: 'WhatsApp', value: 2000, }, { name: 'Facebook Messenger', value: 1300, }, { name: 'WeChat', value: 1165, }, { name: 'Instagram', value: 1000, }, { name: 'Tik Tok', value: 800, }, ] const CircleChartInnerSizes = (props) => ( <div> <CircleChart chartData={dataFirst} id="with-innersize-sm" innerSize="sm" {...props} /> <CircleChart chartData={dataSecond} id="with-innersize-md" innerSize="md" {...props} /> <CircleChart chartData={dataThird} id="with-innersize-lg" innerSize="lg" {...props} /> <CircleChart chartData={dataFourth} className="poop" id="with-innersize-none " innerSize="none" {...props} /> </div> ) export default CircleChartInnerSizes
import React from 'react' import DistributionBar from '../_distribution_bar' const DistributionBarDefault = (props) => { return ( <React.Fragment> <div> <DistributionBar widths={[1, 2, 3, 4, 5, 3, 3, 7]} {...props} /> </div> <br /> <br /> <div> <DistributionBar size="sm" widths={[1, 2, 3, 4, 5, 3, 3, 7]} {...props} /> </div> </React.Fragment> ) } export default DistributionBarDefault
You can customize the order of the colors you would like to use by using the colors
prop. Only the data and status colors will work for Playbook charts. See the design page for reference.
import React from 'react' import DistributionBar from '../_distribution_bar' const DistributionBarCustomColors = (props) => { return ( <React.Fragment> <div> <DistributionBar colors={['data_7', 'data_1', 'neutral']} widths={[4, 5, 3]} {...props} /> </div> </React.Fragment> ) } export default DistributionBarCustomColors
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Name', value: 45 }, ] const GaugeDefault = (props) => ( <div> <Gauge chartData={data} id="gauge-default" {...props} /> </div> ) export default GaugeDefault
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Participants', value: 84 }, ] const GaugeDisableAnimation = (props) => ( <div> <Gauge chartData={data} disableAnimation id="gauge-disable-animation" {...props} /> </div> ) export default GaugeDisableAnimation
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Score', value: 780 }, ] const GaugeTitle = (props) => ( <div> <Gauge chartData={data} id="gauge-title" max={850} min={300} title="Credit Score" {...props} /> </div> ) export default GaugeTitle
import React from 'react' import { Gauge } from '../../' const data1 = [ { name: 'Data Used', value: 32 }, ] const data2 = [ { name: 'Sales to Date', value: 65 }, ] const GaugeUnits = (props) => ( <div> <Gauge chartData={data1} id="gauge-units1" suffix="GB" title="Data Usage" {...props} /> <Gauge chartData={data2} id="gauge-units2" prefix="$" suffix="k" title="Sales Goal" {...props} /> </div> ) export default GaugeUnits
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Capacity', value: 75 }, ] const GaugeFullCircle = (props) => ( <div> <Gauge chartData={data} fullCircle id="gauge-full-circle" suffix="%" title="Seating Capacity" {...props} /> </div> ) export default GaugeFullCircle
import React from 'react' import { Gauge } from '../../' const data = [{ name: 'Rating', value: 4.5, }] const GaugeMinMax = (props) => ( <div> <Gauge chartData={data} id="gauge-min-max" max={5} min={0} showLabels title="Product Rating" {...props} /> </div> ) export default GaugeMinMax
overflow
to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.import React from 'react' import { Flex, FlexItem, Gauge } from '../../' const GaugeSizing = (props) => ( <div> <Flex align="center" wrap {...props} > <FlexItem fixedSize="400px" overflow="hidden" shrink {...props} > <Gauge chartData={[ { name: 'Point 1', value: 100 } ]} id="gauge-sizing4" {...props} /> </FlexItem> <FlexItem fixedSize="300px" overflow="hidden" shrink {...props} > <Gauge chartData={[ { name: 'Point 2', value: 75 } ]} id="gauge-sizing3" {...props} /> </FlexItem> <FlexItem fixedSize="200px" overflow="hidden" shrink {...props} > <Gauge chartData={[ { name: 'Point 3', value: 50 } ]} id="gauge-sizing2" {...props} /> </FlexItem> <FlexItem fixedSize="125px" overflow="hidden" shrink {...props} > <Gauge chartData={[ { name: 'Point 4', value: 25 } ]} height="100%" id="gauge-sizing1" {...props} /> </FlexItem> </Flex> </div> ) export default GaugeSizing
import React from 'react' import { Gauge } from '../../' const GaugeHeight = (props) => ( <div> <Gauge chartData={[ { name: 'Pixels', value: 400 } ]} height="400" id="gauge-height-px" suffix="px" title="Fixed Height in Pixels" {...props} /> <Gauge chartData={[ { name: 'Percentage', value: 45 } ]} height="45%" id="gauge-height-percent" suffix="%" title="Height as Percentage of Width" {...props} /> </div> ) export default GaugeHeight
import React, { useState } from 'react' import { Button, Gauge } from '../../' const GaugeLiveData = (props) => { const [value, setValue] = useState(50) const [name, setName] = useState('Name') const updateValue = () => { setValue(Math.floor(Math.random() * 100)) } const updateName = () => { let index = namesArray.indexOf(name) if (namesArray.indexOf(name) == 5) { index = 0 } else { index += 1 } setName(namesArray[index]) } const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters'] return ( <div> <Button onClick={updateValue} text="Update Value" {...props} /> <Button onClick={updateName} text="Update Name" {...props} /> <Gauge chartData={[{ name: name, value: value }]} id="gauge-live-data" {...props} /> </div> ) } export default GaugeLiveData
Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors
and use ONE desired value data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8
in an array. Hex colors are also available eg: #CA0095
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Name', value: 67 }, ] const GaugeColors = (props) => ( <div> <Gauge chartData={data} id="gauge-colors" {...props} colors={['data-7']} /> </div> ) export default GaugeColors
We are able to wrap our Gauge kits within multiple other Flex and Card components.
import React from "react"; import { Title, Card, Gauge, Flex, FlexItem, SectionSeparator, Body, Caption, } from "../.."; const data = [{ name: "Name", value: 10 }]; const GaugeComplex = (props) => ( <Flex gap="sm" padding="xl" wrap > <FlexItem flex={1} grow > <Card maxWidth="xs" padding="md" > <Title paddingBottom="sm" size={4} text="Abandoned Calls" /> <Flex align="stretch"> <Flex marginRight="sm" orientation="column" > <Body color="light" paddingBottom="sm" text="Total Abandoned" /> <Flex align="baseline" paddingBottom="xs" > <Title size={1} text="39" /> <Title color="light" size={3} text="calls" /> </Flex> <Caption size="xs" text="of 390" /> </Flex> <SectionSeparator alignSelf="stretch" marginRight="sm" orientation="vertical" /> <Flex orientation="column" wrap > <Body color="light" text="% Abandoned" /> <Flex wrap> <FlexItem fixedSize="150px" overflow="hidden" shrink > <Gauge chartData={data} disableAnimation height="150" id="gauge-complex" suffix="%" {...props} /> </FlexItem> </Flex> </Flex> </Flex> </Card> </FlexItem> </Flex> ); export default GaugeComplex;
import React from 'react' import Legend from '../_legend' const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar', 'Gutters', 'Insulation', 'Other'] const LegendDefault = (props) => ( <div> { products.map((product, i) => ( <Legend color={`data_${i + 1}`} key={`legend_${i + 1}`} text={product} {...props} /> )) } </div> ) export default LegendDefault
import React from 'react' import { Legend } from '../..' const LegendPrefix = (props) => ( <div> <Legend color="data_3" prefixText="10" text="Windows" {...props} /> </div> ) export default LegendPrefix
By default legend kit uses data_1
color.
Pass the color prop and use any desired value from $data_colors
, $status_colors
, $product_colors
and $category_colors
list.
import React from 'react' import { Legend } from '../..' const LegendColors = (props) => ( <div> <Legend color="data_8" text="Windows" {...props} /> <Legend color="warning" text="Windows" {...props} /> <Legend color="windows" text="Windows" {...props} /> <Legend color="category_7" text="Windows" {...props} /> </div> ) export default LegendColors
The color prop also allows for use of custom colors passed in as HEX codes.
import React from 'react' import { Legend } from '../..' const LegendCustomColors = (props) => ( <div> <Legend color="#dc418a" text="Windows" {...props} /> <Legend color="#3ef0b8" text="Windows" {...props} /> <Legend color="#ab8b04" text="Windows" {...props} /> </div> ) export default LegendCustomColors
import React from 'react' import LineGraph from '../_line_graph' const data = [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }, { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434], }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387], }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227], }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111], }] const LineGraphDefault = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-default" subTitle="Source: thesolarfoundation.com" title="Solar Employment Growth by Sector, 2010-2016" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default LineGraphDefault
import React from 'react' import { LineGraph } from '../..' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphLegend = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-test-2" legend title="Line Graph with Legend" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} yAxisMin={0} {...props} /> </div> ) export default LineGraphLegend
align
Type: String | Values: left | center | right (defaults to center)
verticalAlign
Type: String | Values: top | middle | bottom (defaults middle)
layout
Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
x
Type: Number (defaults to 0)
y
Type: Number (defaults to 0)
layout
determines the position of the legend items
layout: proximate
will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
x
offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
y
offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
import React from 'react' import { LineGraph, Title } from '../..' const data = [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }, { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434], }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387], }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227], }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111], }] const LineGraphLegendPosition = (props) => ( <div> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="align | verticalAlign" /> <LineGraph align='right' axisTitle="Number of Employees" chartData={data} id="legend-position-line" legend title="Alignment of Legend" verticalAlign="top" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} yAxisMin={0} {...props} /> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="layout" /> <LineGraph axisTitle="Number of Employees" chartData={data} id="legend-position-line-1" layout="vertical" legend title="Layout of Legend" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} yAxisMin={0} {...props} /> <Title paddingBottom="sm" paddingTop="sm" size={4} tag="h4" text="x | y" /> <LineGraph axisTitle="Number of Employees" chartData={data} id="legend-position-line-2" layout="vertical" legend title="Offset of Legend" x={100} xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} y={10} yAxisMin={0} {...props} /> </div> ) export default LineGraphLegendPosition
import React from 'react' import { LineGraph } from '../..' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphLegendNonclickable = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-test-3" legend title="Line Graph with Legend Non Clickable" toggleLegendClick={false} xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} {...props} /> </div> ) export default LineGraphLegendNonclickable
import React from 'react' import LineGraph from '../_line_graph' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphDefault = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} height="300px" id="line-fixed-height" title="Fixed Height (300px)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> <br /> <br /> <LineGraph axisTitle="Number of Employees" chartData={data} height="50%" id="line-percentage-height" title="Percentage Height (50%)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default LineGraphDefault
Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors
and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8
in an array. Hex colors are also available eg: #CA0095
import React from 'react' import LineGraph from '../_line_graph' const data = [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }, { name: 'Manufacturing', data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434], }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387], }, { name: 'Project Development', data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227], }, { name: 'Other', data: [null, null, null, 3112, 4989, 5816, 15274, 18111], }] const LineGraphColors = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']} id="line-colors" title="Line Graph with Custom Data Colors" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default LineGraphColors
Points are automatically arranged by their value
size.
By default, point colors are assigned sequentially from the global data
colors. Note that data points without a value (such as parent nodes) will still take on the next available color.
import React from 'react' import TreemapChart from '../_treemap_chart' const chartData = [ { name: "Pepperoni", parent: "Toppings", value: 600, }, { name: "Cheese", parent: "Toppings", value: 510, }, { name: "Mushroom", parent: "Toppings", value: 330, },{ name: "Onions", parent: "Toppings", value: 250, }, { name: "Olives", parent: "Toppings", value: 204, }, { name: "Pineapple", parent: "Toppings", value: 90, }, { name: "Pizza Toppings", id: "Toppings", }, ] const TreemapChartDefault = (props) => ( <div> <TreemapChart chartData={chartData} id="treemap-default" title="Favored Pizza Toppings" {...props} /> </div> ) export default TreemapChartDefault
Data can be grouped into distinct segments by specifying the relationship in the chartData
. For a point to be a parent, it needs an id
of type string
included in its object. Any other data points may then reference that id
as their parent
value to establish the tree structure.
Parents can also be passed a custom color to be applied to all of its child points.
import React from 'react' import TreemapChart from '../_treemap_chart' const chartData = [ { name: 'Meat', id: 'Meat', color: "#0056CF", }, { name: 'Pepperoni', parent: 'Meat', value: 250, }, { name: 'Meatball', parent: 'Meat', value: 400, }, { name: "Anchovy", parent: 'Meat', value: 40, }, { name: 'Vegetarian', id: 'Vegetarian', color: "#F9BB00", }, { name: 'Onions', parent: 'Vegetarian', value: 300, }, { name: 'Pineapple', parent: 'Vegetarian', value: 90, }, { name: "Peppers", parent: 'Vegetarian', value: 80, }, { name: "Specialty", id: "Specialty", color: "#9E64E9", },{ name: "Buffalo Chicken", parent: "Specialty", value: 400, }, { name: "Supreme", parent: "Specialty", value: 150, } ] const TreemapChartGroupedData = (props) => ( <div> <TreemapChart chartData={chartData} grouped id="treemap-grouped-data" title="Grouped Toppings" {...props} /> </div> ) export default TreemapChartGroupedData
Adding the drillable
prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the chartData
, detailed in the Grouped Data section above.
import React from 'react' import TreemapChart from '../_treemap_chart' const chartData = [ { name: "Evergreen", id: "Evergreen", color: "#0056CF", }, { name: "Pine", id: "Pine", parent: "Evergreen", value: 300, color: "#477BC4", }, { name: "Ponderosa Pine", parent: "Pine", value: 50, }, { name: "Scots Pine", parent: "Pine", value: 150, }, { name: "White Pine", parent: "Pine", value: 100, }, { name: "Douglas Fir", parent: "Evergreen", value: 150, }, { name: "Juniper", parent: "Evergreen", value: 80, }, { name: "Hemlock", parent: "Evergreen", value: 30, }, { name: "Deciduous", id: "Deciduous", color: "#F9BB00", }, { name: "Oak", parent: "Deciduous", value: 80, }, { name: "Maple", id: "Maple", parent: "Deciduous", value: 180, color: "#F7CE52", }, { name: "Red Maple", parent: "Maple", value: 80, }, { name: "Sugar Maple", parent: "Maple", value: 100, }, { name: "Beech", parent: "Deciduous", value: 50, }, { name: "Willow", parent: "Deciduous", value: 100, }, { name: "Juniper", parent: "Deciduous", value: 90, }, ] const TreemapChartDrillable = (props) => ( <div> <TreemapChart chartData={chartData} drillable grouped id="treemap-drillable" title="Drillable Grouped Tree Species" {...props} /> </div> ) export default TreemapChartDrillable
Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors
and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8
in an array. Hex colors are also available eg: #CA0095
import React from 'react' import TreemapChart from '../_treemap_chart' const chartData = [ { name: "Pepperoni", parent: "Toppings", value: 600, }, { name: "Cheese", parent: "Toppings", value: 510, }, { name: "Mushroom", parent: "Toppings", value: 330, },{ name: "Onions", parent: "Toppings", value: 250, }, { name: "Olives", parent: "Toppings", value: 204, }, { name: "Pineapple", parent: "Toppings", value: 90, }, { name: "Pizza Toppings", id: "Toppings", }, ] const TreemapChartColors = (props) => ( <div> <TreemapChart chartData={chartData} colors={["data-4", "data-7", "#8E6E53", "#124732"]} id="treemap-colors" title="Favored Pizza Toppings" {...props} /> </div> ) export default TreemapChartColors
A custom tooltip format can be specified. The desired format can be passed as a string
of custom HTML to the tooltipHtml
prop.
{point.name}
and {point.value}
are useful values that can be referenced for each point in the graph.
import React from 'react' import TreemapChart from '../_treemap_chart' const chartData = [ { name: "Pepperoni", parent: "Toppings", value: 600, }, { name: "Cheese", parent: "Toppings", value: 510, }, { name: "Mushroom", parent: "Toppings", value: 330, },{ name: "Onions", parent: "Toppings", value: 250, }, { name: "Olives", parent: "Toppings", value: 204, }, { name: "Pineapple", parent: "Toppings", value: 90, }, { name: "Pizza Toppings", id: "Toppings", }, ] const TreemapChartTooltip = (props) => ( <div> <TreemapChart chartData={chartData} id="treemap-tooltip" title="Favored Pizza Toppings" tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>' {...props} /> </div> ) export default TreemapChartTooltip