ngx-charts
docs-test
docs-test
  • Introduction
  • Motivation
  • Features
  • Installing
  • Custom Charts
  • Examples
    • Bar Charts
      • Vertical Bar Chart
      • Horizontal Bar Chart
      • Grouped Vertical Bar Chart
      • Grouped Horizontal Bar Chart
      • Stacked Vertical Bar Chart
      • Stacked Horizontal Bar Chart
      • Normalized Vertical Bar Chart
      • Normalized Horizontal Bar Chart
    • Pie Charts
      • Pie Chart
      • Advanced Pie Chart
      • Pie Grid Chart
    • Line/Area Charts
      • Line Chart
      • Area Chart
      • Stacked Area Chart
      • Normalized Area Chart
    • Polar/radar Chart
    • Heat Map Chart
    • Tree Map Chart
    • Number Card Chart
    • Gauge Chart
    • Linear Gauge Chart
    • DAG Chart
  • Contributing
    • Building
    • Troubleshooting
    • Guidelines
    • Community
    • Credits
  • Changelog
  • License
Powered by GitBook
On this page
  • Advanced Pie Chart
  • Inputs
  • Outputs
  • Data Format
  1. Examples
  2. Pie Charts

Advanced Pie Chart

PreviousPie ChartNextPie Grid Chart

Last updated 6 years ago

Advanced Pie Chart

Inputs

Property

Type

Default Value

Description

view

number[]

the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size

results

object[]

the chart data

scheme

object

the color scheme of the chart

customColors

function or object

custom colors for the chart. Used to override a color for a specific value

animations

boolean

true

enable animations

gradient

boolean

false

fill elements with a gradient instead of a solid color

activeEntries

object[]

[]

elements to highlight

label

string

'Total'

the text to show under the total value

tooltipDisabled

boolean

false

show or hide the tooltip

tooltipTemplate

TemplateRef

a custom ng-template to be displayed inside the tooltip

valueFormatting

function

function that formats the numerical value in the chart legend

nameFormatting

function

function that formats name in the chart legend

percentageFormatting

function

function that formats the percentage number in the chart legend

Outputs

Property

Description

select

click event

activate

element activation event (mouse enter)

deactivate

element deactivation event (mouse leave)

Data Format

The data format is single series:

[
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  }
]