PB Gauge Chart

In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible.

See the highcharts API docs for a comprehensive look at what is possible.

Summary

React Rendered

Default

In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

import React from 'react'

import { PbGaugeChart } from 'playbook-ui'

const chartOptions = {
  series:[{data:[{ name: "Name", y: 45 }]}]
}

const PbGaugeChartDefault = (props) => (
  <div>
    <PbGaugeChart
        options={chartOptions}
    />
  </div>
)

export default PbGaugeChartDefault

Disable Animation

import React from 'react'

import { PbGaugeChart } from 'playbook-ui'

const data = [{ name: "Participants", y: 84 }]

const chartOptions = {
  series: [{ data: data }],
  plotOptions: {
    series: {
      animation: false,
    },
  },
};

const PbGaugeChartDisableAnimation = (props) => (
  <div>
    <PbGaugeChart
        options={chartOptions}
    />
  </div>
)

export default PbGaugeChartDisableAnimation

With Title

import React from 'react'

import { PbGaugeChart } from 'playbook-ui'

const data = [{ name: "Score", y: 780 }]

const chartOptions = {
  title: {
    text: "Credit Score",
  },
  yAxis: {
    min: 300,
    max: 850,
  },
  series: [{ data: data }],
};

const PbGaugeChartTitle = (props) => (
  <div>
    <PbGaugeChart
        options={chartOptions}
    />
  </div>
)

export default PbGaugeChartTitle

With 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 { PbGaugeChart, colors, typography } from 'playbook-ui'

const data1 = [
  { name: 'Data Used', y: 32 },
]
const data2 = [
  { name: 'Sales to Date', y: 65 },
]

const chartOptions1 = {
  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 chartOptions2 = {
  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 PbGaugeChartUnits = (props) => (
  <div>
    <PbGaugeChart
        options={chartOptions1}
    />
    <PbGaugeChart
        options={chartOptions2}
    />
  </div>
)

export default PbGaugeChartUnits

Full Circle

import React from 'react'

import { PbGaugeChart, colors, typography } from 'playbook-ui'

const data = [{ name: "Capacity", y: 75 }]

const chartOptions = {
  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 PbGaugeChartFullCircle = (props) => (
  <div>
    <PbGaugeChart
        options={chartOptions}
    />
  </div>
)

export default PbGaugeChartFullCircle

With Min and Max Labels

By default, Highcharts set min to 0 and max to 100 but this can be customized if needed as shown here.

import React from 'react'

import { PbGaugeChart, colors, typography } from 'playbook-ui'

const data = [{ name: "Rating", y: 4.5 }]

const chartOptions = {
  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 PbGaugeChartMinMax = (props) => (
  <div>
    <PbGaugeChart
        options={chartOptions}
    />
  </div>
)

export default PbGaugeChartMinMax

Sizing

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

Note: set overflow to hidden on the parent element when nesting gauges inside of flex items to best respond to shrinking screens.

import React from 'react'

import { PbGaugeChart, Flex, FlexItem } from 'playbook-ui'

const PbGaugeChartSizing = (props) => (
  <div>
    <Flex
        align="center"
        wrap
    >
      <FlexItem
          fixedSize="400px"
          overflow="hidden"
          shrink
      >
        <PbGaugeChart
            options={{
              series: [{ data: [{ name: "Point 1", y: 100 }] }],
            }}
        />
      </FlexItem>
      <FlexItem
          fixedSize="300px"
          overflow="hidden"
          shrink
      >
        <PbGaugeChart
            options={{
              series: [{ data: [{ name: "Point 2", y: 75 }] }],
            }}
        />
      </FlexItem>
      <FlexItem
          fixedSize="200px"
          overflow="hidden"
          shrink
      >
        <PbGaugeChart
            options={{
              series: [{ data: [{ name: "Point 3", y: 50 }] }],
            }}
        />
      </FlexItem>
      <FlexItem
          fixedSize="125px"
          overflow="hidden"
          shrink
      >
        <PbGaugeChart
            options={{
              chart: {
                height: "100%",
              },
              series: [{ data: [{ name: "Point 4", y: 25 }] }],
            }}
        />
      </FlexItem>
    </Flex>
  </div>
)

export default PbGaugeChartSizing

Height

import React from 'react'

import { PbGaugeChart, colors, typography } from 'playbook-ui'

const chartOptions = {
  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>`,
      },
    },
  },
};

const chartOptions2 = {
  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>`,
      },
    },
  },
};

const PbGaugeChartHeight = (props) => (
  <div>
    <PbGaugeChart
        options={chartOptions}
    />
    <PbGaugeChart
        options={chartOptions2}
    />
  </div>
)

export default PbGaugeChartHeight

Live Data

import React, { useState, useRef } from 'react'

import { PbGaugeChart, Button } from 'playbook-ui'

const PbGaugeChartLiveData = (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 chartOptions = {
    title: {
      text: name,
    },
    series: [{
      data: [{ name: name, y: value }]
    }]
  }
  return (
    <div>
      <Button
          onClick={updateValue}
          text="Update Value"
        />
        <Button
            onClick={updateName}
            text="Update Name"
        />
      <PbGaugeChart
          options={chartOptions}
          ref={chartRef}
      />
    </div>
  );
}

export default PbGaugeChartLiveData

Custom Color

Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.

For Rails, the option plotOptions.solidgauge.borderColor can only be used with HEX values as shown.

import React from 'react'

import { PbGaugeChart, colors } from 'playbook-ui'

const data = [{ name: "Name", y: 67 }]

const chartOptions = {
  series: [{ data: data }],
  plotOptions: {
    solidgauge: {
      borderColor: colors.data_7,
    }
  },
};
const PbGaugeChartColor = (props) => (
  <div>
    <PbGaugeChart
        options={chartOptions}
    />
  </div>
)

export default PbGaugeChartColor

Complex Example

We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).

import React from 'react'

import { PbGaugeChart, Flex, FlexItem, Card, Caption, Body, SectionSeparator, Title, colors, typography } from 'playbook-ui'

const data = [{ name: "Name", y: 10 }];

const chartOptions = {
  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 PbGaugeChartComplex = (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
              >
                <PbGaugeChart
                    options={chartOptions}
                />
               </FlexItem>
            </Flex>
          </Flex>
        </Flex>
      </Card>
    </FlexItem>
  </Flex>
)

export default PbGaugeChartComplex

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