This package contains a subset of the PatternFly React Charts wrapped as web components.
The package is a prerequisite if you want to use charts in PatternFly Java, but can also be used independently.
The following web components are available:
<pfj-chart-donut>→ChartDonut<pfj-chart-donut-threshold>→ChartDonutThreshold<pfj-chart-donut-utilization>→ChartDonutUtilization<pfj-chart-bullet>→ChartBullet<pfj-chart-pie>→ChartPie
Install the package using npm:
npm install @patternfly-java/charts
Import it in your JavaScript file:
import "@patternfly-java/charts/dist/charts";<pfj-chart-donut
id="chart-donut-0"
width="300"
height="300"
title="Pets"
sub-title="Count"
></pfj-chart-donut>
<pfj-chart-donut-utilization
width="300"
height="300"
title="60%"
sub-title="Utilization"
data='{"x":"Storage","y":60}'
></pfj-chart-donut-utilization>
<pfj-chart-donut-threshold
aria-desc="Storage capacity"
aria-title="Donut utilization chart with static threshold example"
constrain-to-visible-area
data='[{"x":"Warning at 60%","y":60},{"x":"Danger at 90%","y":90}]'
width="300"
height="300"
>
<pfj-chart-donut-utilization
id="chart-donut-utilization-0"
sub-title="of 100 GBps"
title="0%"
thresholds='[{"value": 60}, {"value": 90}]'
></pfj-chart-donut-utilization>
</pfj-chart-donut-threshold>
<script type="module">
const cd = document.getElementById('chart-donut-0');
cd.data = [
{x: 'Cats', y: 25},
{x: 'Dogs', y: 55},
{x: 'Birds', y: 20}
];
cd.labels = ({datum}) => `${datum.x}: ${datum.y}%`;
const cdu = document.getElementById('chart-donut-utilization-0');
cdu.data = {x: 'Storage capacity', y: 0};
setInterval(() => {
let previous = cdu.data.y;
let current = (previous + 10) % 100;
cdu.data = {x: 'Storage capacity', y: current};
cdu.title = `${current}%`;
cdu.subTitle = `${current} of 100 GBps`;
}, 1000);
</script>