Gauge

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.

Summary

React Rendered

Default

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;

Disable Animation

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;

Title

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;

Units

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;

Full Circle

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;

Min Max Labels

Min defaults to 0, Max to 100.

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;

Sizing

Gauge resizes dynamically to fit whatever element it's placed within.

Note: set `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

Height

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;

Live Data

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

Color Overrides

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;

Complex

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;

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat