Skip to content

Latest commit

 

History

History
72 lines (40 loc) · 2.64 KB

design-patterns-controls-AreaChart.md

File metadata and controls

72 lines (40 loc) · 2.64 KB

AreaChart

Basics

AreaChart displays quantitative data and is based on a LineChart. The area between the axis and the lines is filled with colors

When to use

The SDK offers a set data visualization controls. Choose the one that is most suitable to your need.

  • AreaChart - displays quantitative data like a LineChart with the area between axis and the lines filled with colors.
  • BarChart - displays categorical data using rectangular bars of proportional length to represent values.
  • Donut - displays proportional data as part of a whole.
  • LineChart - displays a series of data points connected by straight line segments.
  • Map - displays data with longitude and latitude coordinates on a world map.
  • Metrics - displays a single value for a set of metrics
  • MonitorChartV2 - displays the metrics for your resource and inherently knows how to fetch data for your resource.
  • QuotaGauge - displays the current value relative to a quota (limit) and total.
  • ScatterChart - displays a plot of data points without any connecting lines
  • SingleMetric - displays a single value for a metric
  • SingleValueGauge - displays the status of a current value relative to an optional total.

Best practices

Use the AreaChart to display and compare 2 or more values.

Do

  • Use the AreaChart to compare 2 to 5 quantitative sets of data
  • Decide whether the grouped or stacked visualization provides the easiest to understand comparison

Don't

  • Put too many different sets of data into the same chart

Developer tips and tricks

Interactive control and sample source code

Go to the playground site to use the latest control and get source code for your project. Learn more about playground.

Related info