Back to Fluentui

SparklineChartBestPractices

packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md

4.40.2-hotfix2739 B
Original Source

Layout

A standard sparkline component is comprised of a single area chart. The value shown to the right of the sparkline represents the latest data of the trendline. It does not represent the average value of the data plotted. Most scenarios that require sparklines typically need only green and red to show positive or negative trend, respectively. If representing a neutral trend, use Comm Blue #0078D4. However, the color of the sparkline can be customized to suit your product and scenario you’re designing for. You can use positive, negative, and neutral colors next to each other.

Content

  • Line 1px line
  • Fill Same color as line with opacity of 0.2
  • Legend Latest value to show as label after the chart.