Important Note for the React Kit: In order to leverage this kit, you must install highcharts
and highcharts-react-official
into your project as shown below. To then apply Playbook styles to your Highchart, import gaugeTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.
import React from 'react' import { gaugeTheme } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const data = [{ name: "Name", y: 45 }] const baseOptions = { series: [{ data: data }], }; const GaugeDefault = () => { const options = Highcharts.merge({}, gaugeTheme, baseOptions); return ( <div> <HighchartsReact highcharts={Highcharts} options={options} /> </div> ); }; export default GaugeDefault;
import React from 'react' import { gaugeTheme } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const data = [{ name: "Participants", y: 84 }] const baseOptions = { series: [{ data: data }], plotOptions: { series: { animation: false, }, }, }; const GaugeDisableAnimation = () => { const options = Highcharts.merge({}, gaugeTheme, baseOptions); return ( <div> <HighchartsReact disableAnimation highcharts={Highcharts} options={options} /> </div> ); }; export default GaugeDisableAnimation;
import React from 'react' import { gaugeTheme } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const data = [{ name: "Score", y: 780 }] const baseOptions = { title: { text: "Credit Score", }, yAxis: { min: 300, max: 850, }, series: [{ data: data }], }; const GaugeTitle = () => { const options = Highcharts.merge({}, gaugeTheme, baseOptions); return ( <div> <HighchartsReact highcharts={Highcharts} id="gauge-title" options={options} /> </div> ); }; export default GaugeTitle;
Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.
import React from 'react' import { gaugeTheme, colors, typography } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const data1 = [ { name: 'Data Used', y: 32 }, ] const data2 = [ { name: 'Sales to Date', y: 65 }, ] const baseOptions1 = { title: { text: "Data Usage", }, series: [{ data: data1 }], plotOptions: { solidgauge: { dataLabels: { format: `<span class="fix">{y:,f}</span>` + `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`, }, }, }, }; const baseOptions2 = { title: { text: "Sales Goal", }, series: [{ data: data2 }], plotOptions: { solidgauge: { dataLabels: { format: `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` + `<span class="fix" y="38">{y:,f}</span>` + `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`, }, }, }, }; const GaugeUnits = () => { const options1 = Highcharts.merge({}, gaugeTheme, baseOptions1); const options2 = Highcharts.merge({}, gaugeTheme, baseOptions2); return ( <div> <HighchartsReact highcharts={Highcharts} id="gauge-units1" options={options1} /> <HighchartsReact highcharts={Highcharts} id="gauge-units2" options={options2} /> </div> ); }; export default GaugeUnits;
import React from 'react' import { gaugeTheme, colors, typography } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const data = [{ name: "Capacity", y: 75 }] const baseOptions = { title: { text: "Seating Capacity", }, series: [{ data: data }], pane: { startAngle: 0, endAngle: 360, }, plotOptions: { solidgauge: { dataLabels: { format: `<span class="fix">{y:,f}</span>` + `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`, }, }, }, }; const GaugeFullCircle = () => { const options = Highcharts.merge({}, gaugeTheme, baseOptions); return ( <div> <HighchartsReact highcharts={Highcharts} id="gauge-full-circle" options={options} /> </div> ); }; export default GaugeFullCircle;
import React from 'react' import { gaugeTheme, colors, typography } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const data = [{ name: "Rating", y: 4.5 }] const baseOptions = { title: { text: "Product Rating", }, yAxis: { min: 0, max: 5, lineWidth: 0, tickWidth: 0, minorTickInterval: null, tickAmount: 2, tickPositions: [0, 5], labels: { y: 26, enabled: true, style: { color: colors.neutral, fontFamily: typography.font_family_base, fontWeight: typography.bold, } }, }, series: [{ data: data }], }; const GaugeMinMax = () => { const options = Highcharts.merge({}, gaugeTheme, baseOptions); return ( <div> <HighchartsReact highcharts={Highcharts} id="gauge-min-max" options={options} /> </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, gaugeTheme } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const GaugeSizing = (props) => ( <div> <Flex align="center" wrap > <FlexItem fixedSize="400px" overflow="hidden" shrink > <HighchartsReact highcharts={Highcharts} options={Highcharts.merge({}, gaugeTheme, { series: [{ data: [{ name: "Point 1", y: 100 }] }], })} /> </FlexItem> <FlexItem fixedSize="300px" overflow="hidden" shrink > <HighchartsReact highcharts={Highcharts} options={Highcharts.merge({}, gaugeTheme, { series: [{ data: [{ name: "Point 2", y: 75 }] }], })} /> </FlexItem> <FlexItem fixedSize="200px" overflow="hidden" shrink > <HighchartsReact highcharts={Highcharts} options={Highcharts.merge({}, gaugeTheme, { series: [{ data: [{ name: "Point 3", y: 50 }] }], })} /> </FlexItem> <FlexItem fixedSize="125px" overflow="hidden" shrink > <HighchartsReact highcharts={Highcharts} options={Highcharts.merge({}, gaugeTheme, { chart: { height: "100%", }, series: [{ data: [{ name: "Point 4", y: 25 }] }], })} /> </FlexItem> </Flex> </div> ) export default GaugeSizing
import React from 'react' import { gaugeTheme, colors, typography } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const GaugeHeight = () => { return ( <div> <HighchartsReact highcharts={Highcharts} options={Highcharts.merge({}, gaugeTheme, { title: { text: "Fixed Height in Pixels", }, chart: { height: "400", }, series: [{ data: [{ name: "Pixels", y: 400 }] }], plotOptions: { solidgauge: { dataLabels: { format: `<span class="fix">{y:,f}</span>` + `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">px</span>`, }, }, }, })} /> <HighchartsReact highcharts={Highcharts} options={Highcharts.merge({}, gaugeTheme, { title: { text: "Height as Percentage of Width", }, chart: { height: "45%", }, series: [{ data: [{ name: "Percentage", y: 45 }] }], plotOptions: { solidgauge: { dataLabels: { format: `<span class="fix">{y:,f}</span>` + `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`, }, }, }, })} /> </div> ); }; export default GaugeHeight;
import React, { useState, useRef } from 'react' import { Button, gaugeTheme } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const GaugeLiveData = (props) => { const [value, setValue] = useState(50) const [name, setName] = useState('Name') const chartRef = useRef(null) const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters'] const updateValue = () => { const newValue = Math.floor(Math.random() * 100) setValue(newValue) const chart = chartRef.current?.chart if (chart) { chart.series[0].points[0].update(newValue) } } const updateName = () => { let index = namesArray.indexOf(name) if (namesArray.indexOf(name) == 5) { index = 0 } else { index += 1 } setName(namesArray[index]) const chart = chartRef.current?.chart if (chart) { chart.series[0].points[0].update({ name: namesArray[index] }) } } const options = Highcharts.merge({}, gaugeTheme, { title: { text: name, }, series: [{ data: [{ name: name, y: value }] }] } ) return ( <div> <Button onClick={updateValue} text="Update Value" /> <Button onClick={updateName} text="Update Name" /> <HighchartsReact highcharts={Highcharts} options={options} ref={chartRef} /> </div> ) } export default GaugeLiveData
Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop plotOptions.solidgauge.borderColor
with a Playbook token like colors.
+ data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8
. Hex colors are also available eg: #CA0095
import React from 'react' import { gaugeTheme, colors } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const data = [{ name: "Name", y: 67 }] const baseOptions = { series: [{ data: data }], plotOptions: { solidgauge: { borderColor: colors.data_7, } }, }; const GaugeColors = () => { const options = Highcharts.merge({}, gaugeTheme, baseOptions); return ( <div> <HighchartsReact highcharts={Highcharts} options={options} /> </div> ); }; export default GaugeColors;
We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).
import React from "react"; import { Flex, FlexItem, Card, Caption, Body, SectionSeparator, Title, gaugeTheme, colors, typography } from 'playbook-ui' import Highcharts from "highcharts" import HighchartsReact from "highcharts-react-official" import HighchartsMore from "highcharts/highcharts-more" import SolidGauge from "highcharts/modules/solid-gauge" HighchartsMore(Highcharts); SolidGauge(Highcharts); const data = [{ name: "Name", y: 10 }]; const baseOptions = { series: [{ data: data }], chart: { height: "150", }, plotOptions: { series: { animation: false, }, solidgauge: { dataLabels: { format: `<span class="fix">{y:,f}</span>` + `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`, }, }, }, }; const options = Highcharts.merge({}, gaugeTheme, baseOptions); 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 > <HighchartsReact highcharts={Highcharts} options={options} /> </FlexItem> </Flex> </Flex> </Flex> </Card> </FlexItem> </Flex> ); export default GaugeComplex;