Charts

Components > Displaying Data > Charts

Use this feature to...

Display data visually using charts and graphs

See this feature in action...

Test out this feature in a hosted version of the sample app

Overview

A picture is worth a thousand words…

Charts can help your users understand data more quickly, often helping them spot relationships, trends, and cause-and-effect more easily than grids of numbers. Charts can also reveal the data at several levels of detail, from broad strokes down to fine detail.

All charts should have a title that clearly explains the data represented in the chart. If the chart has X/Y axes, those need to be clearly labeled as well. The axes should have labeled tick marks at regular intervals that identify the value at that point on the axis.

In most cases, charts should allow the user to see the data values underlying key points in the chart. Data values should be visible either directly in the chart, by looking at the chart axes, in the legend, or in a tooltip that displays when the user hovers the mouse over a portion of the chart.

Avoid 3-D charts when possible. They may seem cool at first, but they can be more difficult for the user to read and understand than simpler 2-dimensional charts.

Sometimes multiple series of data display in one chart, allowing the user to see both trends within each series of data and comparisons across different series of data. When multiple series are displayed, each series should display in a different color and the chart should include a legend to identify each series.

Some types of charts like pie and doughnut charts help the user see comparisons between different segments of the data. They can see which segments are larger and which are smaller. Other types of charts like bar, area, and line charts help the user see trends in the data, usually over time.

Less common chart types — radar, polar area, bubble, etc. — may be appropriate for very specific cases and audiences, but in general they’re less recognized by users and may make it more difficult for the user to understand the data.

If you need to represent a simple percentage value visually, check out the percentage circle or progress bar.

Examples of the types of charts we often see in Responsive UI applications

Development

Web component development

Component reference

chart.js

Package: chart.js

Displays data graphically

View the chart.js reference doc

Implementation

Add chart.js to your package.json file and use npm install to install it.

Import the module

"chart.js": "x.y.z",

Import Chart into the view’s typescript file.

Import the module

import Chart from 'chart.js/auto';

Add the two wrapper divs and a canvas element shown below to the location in the view’s HTML where you would like the chart to display.

Chart HTML

<div class="chart-container-outer">
    <div class="chart-container-inner">
        <canvas id="barChart"></canvas>
    </div>
</div>

We typically animate charts unless the user has indicated that they prefer reduced motion. Some people suffer from vestibular disorders and need component animations turned off to avoid unpleasant vertigo sensations. (Learn more about accessibility here.) We check the prefers-reduced-motion media query to see if the user has requested reduced motion and store that value in a field for later reference.

We typically check for prefers-reduced-motion using CSS media queries, but chart.js is a JavaScript utility, so we have to use JavaScript to test for this.

Checking if the user prefers reduced motion

ngOnInit(): void {
    // Check if the user requests no animation
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (!mediaQuery || mediaQuery.matches) {
        this.animateCharts = false;
    }
}

Your charts will be easier to read and will be more cohesive with the rest of your UI if you used themed colors for the title, legend, grid, and data series. We can reference the CSS variables provided as part of the Responsive UI theming in order to get the proper font and color values for a themed chart.

The theming provides a series of 10 opaque colors and 10 translucent colors that you can use for your chart data series.

The translucent colors typically look best in charts that display grid lines — such as line charts, bar charts and area charts — as they allow the grid lines to show through the data series a little, making it easier for the user to determine the approximate value of that data series at a glance.
The opaque colors typically look best in charts that do not display grid lines, such as pie and doughnut charts.

Getting chart colors from CSS variables

getChartColors() {
    const styles = getComputedStyle(this.elRef.nativeElement);
    this.chartFontColor = String(styles.getPropertyValue('--rui-text-regular'));
    this.chartGridColor = String(styles.getPropertyValue('--rui-chart-grid-color'));
    this.chartDataSeriesColor1 = String(styles.getPropertyValue('--rui-chart-data-series-color-1'));
    this.chartDataSeriesTranslucentColor1 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-1'));
    this.chartDataSeriesColor2 = String(styles.getPropertyValue('--rui-chart-data-series-color-2'));
    this.chartDataSeriesTranslucentColor2 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-2'));
    this.chartDataSeriesColor3 = String(styles.getPropertyValue('--rui-chart-data-series-color-3'));
    this.chartDataSeriesTranslucentColor3 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-3'));
    this.chartDataSeriesColor4 = String(styles.getPropertyValue('--rui-chart-data-series-color-4'));
    this.chartDataSeriesTranslucentColor4 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-4'));
    this.chartDataSeriesColor5 = String(styles.getPropertyValue('--rui-chart-data-series-color-5'));
    this.chartDataSeriesTranslucentColor5 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-5'));
    this.chartDataSeriesColor6 = String(styles.getPropertyValue('--rui-chart-data-series-color-6'));
    this.chartDataSeriesTranslucentColor6 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-6'));
    this.chartDataSeriesColor7 = String(styles.getPropertyValue('--rui-chart-data-series-color-7'));
    this.chartDataSeriesTranslucentColor7 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-7'));
    this.chartDataSeriesColor8 = String(styles.getPropertyValue('--rui-chart-data-series-color-8'));
    this.chartDataSeriesTranslucentColor8 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-8'));
    this.chartDataSeriesColor9 = String(styles.getPropertyValue('--rui-chart-data-series-color-9'));
    this.chartDataSeriesTranslucentColor9 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-9'));
    this.chartDataSeriesColor10 = String(styles.getPropertyValue('--rui-chart-data-series-color-10'));
    this.chartDataSeriesTranslucentColor10 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-10'));
}

Whenever the theme changes after the page is rendered, you must recreate all charts in the page using the same code used to create them the first time. This is because the chart.js framework passes in the colors via JavaScript, not CSS, so you must recreate the chart to see the colors from the new theme.

Recreating charts on a theme change

@HostListener('window:rui-load-theme', ['$event'])
private themeChanged(e) {
    this.setUpCharts();
}

Last, we add the code that finds the chart canvas in the DOM by id and defines the chart type. This code uses the font and color values that we pulled from the themed CSS variables, and references the field that stores whether or not to animate the chart based on the user’s reduced motion setting.

Chart setup code

setUpBarChart() {
    const canvas = document.querySelector('#barChart');
    if (canvas) {
        if (this.barChart) {
            // If chart already exists, update it with current theme's chart colors
            this.barChart.data.datasets[0].backgroundColor = this.chartDataSeriesTranslucentColor1;
            this.barChart.data.datasets[1].backgroundColor = this.chartDataSeriesTranslucentColor2;
            this.barChart.options.plugins.legend.labels.color = this.chartFontColor;
            this.barChart.options.scales.x.ticks.color = this.chartFontColor;
            this.barChart.options.scales.y.ticks.color = this.chartFontColor;
            this.barChart.options.scales.x.grid.color = this.chartGridColor;
            this.barChart.options.scales.y.grid.color = this.chartGridColor;
            this.barChart.update();
        } else {
            // Otherwise create a new chart using current theme's chart colors
            this.barChart = new Chart(canvas as any, {
                type: 'bar',
                data: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [
                        {
                            label: 'Domestic',
                            backgroundColor: this.chartDataSeriesTranslucentColor1,
                            data: [65, 59, 80, 81, 56, 55, 40]
                        },
                        {
                            label: 'International',
                            backgroundColor: this.chartDataSeriesTranslucentColor2,
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }
                    ]
                },
                options: {
                    ...(!this.animateCharts && { animation: false }),
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            labels: {
                                color: this.chartFontColor
                            }
                        }
                    },
                    scales:
                    {
                        x: {
                            grid: { color: this.chartGridColor },
                            ticks: { color: this.chartFontColor }
                        },
                        y: {
                            grid: { color: this.chartGridColor },
                            ticks: { color: this.chartFontColor }
                        }
                    }
                }
            });
        }
    }
}

See the documentation for the chart.js library at http://www.chartjs.org/docs/ for more information on how to set up various chart types.

Angular component development

Component reference

chart.js

Package: chart.js

Displays data graphically

View the chart.js reference doc

Implementation

Add chart.js to your package.json file and use npm install to install it.

Import the module

"chart.js": "x.y.z",

Import Chart into the view’s typescript file.

Import the module

import Chart from 'chart.js/auto';

Add the two wrapper divs and a canvas element shown below to the location in the view’s HTML where you would like the chart to display.

Chart HTML

<div class="chart-container-outer">
    <div class="chart-container-inner">
        <canvas id="barChart"></canvas>
    </div>
</div>

We typically check for prefers-reduced-motion using CSS media queries, but chart.js is a JavaScript utility, so we have to use JavaScript to test for this.

Checking if the user prefers reduced motion

ngOnInit(): void {
    // Check if the user requests no animation
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (!mediaQuery || mediaQuery.matches) {
        this.animateCharts = false;
    }
}

The theming provides a series of 10 opaque colors and 10 translucent colors that you can use for your chart data series.

The translucent colors typically look best in charts that display grid lines — such as line charts, bar charts and area charts — as they allow the grid lines to show through the data series a little, making it easier for the user to determine the approximate value of that data series at a glance.
The opaque colors typically look best in charts that do not display grid lines, such as pie and doughnut charts.

Getting chart colors from CSS variables

getChartColors() {
    const styles = getComputedStyle(this.elRef.nativeElement);
    this.chartFontColor = String(styles.getPropertyValue('--rui-text-regular'));
    this.chartGridColor = String(styles.getPropertyValue('--rui-chart-grid-color'));
    this.chartDataSeriesColor1 = String(styles.getPropertyValue('--rui-chart-data-series-color-1'));
    this.chartDataSeriesTranslucentColor1 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-1'));
    this.chartDataSeriesColor2 = String(styles.getPropertyValue('--rui-chart-data-series-color-2'));
    this.chartDataSeriesTranslucentColor2 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-2'));
    this.chartDataSeriesColor3 = String(styles.getPropertyValue('--rui-chart-data-series-color-3'));
    this.chartDataSeriesTranslucentColor3 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-3'));
    this.chartDataSeriesColor4 = String(styles.getPropertyValue('--rui-chart-data-series-color-4'));
    this.chartDataSeriesTranslucentColor4 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-4'));
    this.chartDataSeriesColor5 = String(styles.getPropertyValue('--rui-chart-data-series-color-5'));
    this.chartDataSeriesTranslucentColor5 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-5'));
    this.chartDataSeriesColor6 = String(styles.getPropertyValue('--rui-chart-data-series-color-6'));
    this.chartDataSeriesTranslucentColor6 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-6'));
    this.chartDataSeriesColor7 = String(styles.getPropertyValue('--rui-chart-data-series-color-7'));
    this.chartDataSeriesTranslucentColor7 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-7'));
    this.chartDataSeriesColor8 = String(styles.getPropertyValue('--rui-chart-data-series-color-8'));
    this.chartDataSeriesTranslucentColor8 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-8'));
    this.chartDataSeriesColor9 = String(styles.getPropertyValue('--rui-chart-data-series-color-9'));
    this.chartDataSeriesTranslucentColor9 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-9'));
    this.chartDataSeriesColor10 = String(styles.getPropertyValue('--rui-chart-data-series-color-10'));
    this.chartDataSeriesTranslucentColor10 = String(styles.getPropertyValue('--rui-chart-data-series-translucent-color-10'));
}

Recreating charts on a theme change

@HostListener('window:rui-load-theme', ['$event'])
private themeChanged(e) {
    this.setUpCharts();
}

Chart setup code

setUpBarChart() {
    const canvas = document.querySelector('#barChart');
    if (canvas) {
        if (this.barChart) {
            // If chart already exists, update it with current theme's chart colors
            this.barChart.data.datasets[0].backgroundColor = this.chartDataSeriesTranslucentColor1;
            this.barChart.data.datasets[1].backgroundColor = this.chartDataSeriesTranslucentColor2;
            this.barChart.options.plugins.legend.labels.color = this.chartFontColor;
            this.barChart.options.scales.x.ticks.color = this.chartFontColor;
            this.barChart.options.scales.y.ticks.color = this.chartFontColor;
            this.barChart.options.scales.x.grid.color = this.chartGridColor;
            this.barChart.options.scales.y.grid.color = this.chartGridColor;
            this.barChart.update();
        } else {
            // Otherwise create a new chart using current theme's chart colors
            this.barChart = new Chart(canvas as any, {
                type: 'bar',
                data: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [
                        {
                            label: 'Domestic',
                            backgroundColor: this.chartDataSeriesTranslucentColor1,
                            data: [65, 59, 80, 81, 56, 55, 40]
                        },
                        {
                            label: 'International',
                            backgroundColor: this.chartDataSeriesTranslucentColor2,
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }
                    ]
                },
                options: {
                    ...(!this.animateCharts && { animation: false }),
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            labels: {
                                color: this.chartFontColor
                            }
                        }
                    },
                    scales:
                    {
                        x: {
                            grid: { color: this.chartGridColor },
                            ticks: { color: this.chartFontColor }
                        },
                        y: {
                            grid: { color: this.chartGridColor },
                            ticks: { color: this.chartFontColor }
                        }
                    }
                }
            });
        }
    }
}

See the documentation for the chart.js library at http://www.chartjs.org/docs/ for more information on how to set up various chart types.

Design

Figma design

Figma design info

You can find this component in the Components - Charts page in the Figma UI Kit.

Dev Component	Design Component Name
Bar chart	RUI / Charts / Bar Chart
Doughnut chart	RUI / Charts / Doughnut Chart
Line chart	RUI / Charts / Line Chart

We have components for only a few of the possible chart types.

If none of these work for your use case, feel free to build your own chart appearance using Figma or by importing a screen shot image of the chart.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Charts

Dev Component	Design Component Name
Bar chart	JHA / Charts / Bar Chart
Doughnut chart	JHA / Charts / Doughnut Chart
Line chart	JHA / Charts / Line Chart
Sparkline	JHA / Charts / Sparkline

We have components for only a few of the possible chart types.

If none of these work for your use case, feel free to build your own chart appearance using XD or by importing a screen shot image of the chart.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Fri Feb 16 2024