ng2 Charts by Valor Software

A charting library written using TypeScript by the Valor Software who’ve introduced libraries like ngx-bootstrap and ng2-dracula.

Project website


License MIT

1. General
2. Bar Chart
3. Line chart
4. Bubble Chart
5. Pie Chart
6. Doughnut Chart
7. Scatter Chart
8. Radar Chart
9. Polar Area Chart


“@angular/animations”: “~8.0.0”,
“@angular/cdk”: “~8.0.0”,
“@angular/common”: “~8.0.0”,
“@angular/compiler”: “~8.0.0”,
“@angular/core”: “~8.0.0”,
“@angular/forms”: “~8.0.0”,
“@angular/material”: “^8.0.0”,
“@angular/platform-browser”: “~8.0.0”,
“@angular/platform-browser-dynamic”: “~8.0.0”,
“@angular/router”: “~8.0.0”,
“chart.js”: “^2.8.0”,
“chartjs-adapter-luxon”: “^0.2.0”,
“chartjs-plugin-annotation”: “^0.5.7”,
“chartjs-plugin-datalabels”: “^0.6.0”,
“core-js”: “^3.1.3”,
“highlight.js”: “^9.15.8”,
“luxon”: “^1.15.0”,
“marked”: “^0.6.2”,
“ngx-highlightjs”: “^3.0.3”,
“ngx-markdown”: “^7.1.5”,
“prismjs”: “^1.16.0”,
“rxjs”: “~6.5.2”,
“zone.js”: “^0.9.1”


npm i ng2-charts


  • canvas made
  • CSS customizable border, fonts, padding, background-color and gradient
  • fresh look
  • legend configuration: width, events, position (top, bottom, left, right), font (size, family, style, color, padding), support for HTML legend
  • title configuration: font (family, size, style, padding, color), padding, height, position (top, bottom, right, left)
  • tooltip customization: toggle, intersect, position (average, nearest), ite, sort, callbacks, background-color, fonts (size, family, style, color) for footer, body and title, spacing, margin, caret size and padding, border color and width
  • line configuration: tension, background-color, border (width, color, cap style, dash dash offset, join style), brazier control,
  • point configuration: radius, style (‘circle’, ‘cross’, ‘crossRot’ ,’dash’, ‘line’, ‘rect’, ‘rectRounded’, ‘rectRot’, ‘star’, ‘triangle’), rotatiomn, border color and width, background-color, hit radius hover radius and hover border width
  • rectangle configuration: background-color, border (width, color, excluding borders)
  • detailed chart configuration that allows to change styling (colors, widths, alignment, borders, labels) and react on callbacks depending on the chart type
  • axes configuration: display, weight, callbacks (beforeUpdate, beforeSetDimensions, afterSetDimensions, beforeDataLimits, afterDataLimits, beforeBuildTicks, afterBuildTicks, beforeTickToLabelConversion, afterTickToLabelConversion, beforeCalculateTickRotation, afterCalculateTickRotation, beforeFit, afterFit, afterUpdate)
  • tick configuration (cartesian axes settings): skip, padding, rotation, padding, offset, and tick formats
  • axis IDs
  • creating multiple axes
  • radial axes
  • labelling axes and their configuration (heigh, color, font configuration, padding)
  • arc configuration: background-color, border (width, color, alignment)
  • animations: duration, easing, onProgress, onComplete. Easing: ‘linear’, ‘easeInQuad, ’’easeOutQuad’, ‘easeInOutQuad’, ‘easeInCubic’, ‘easeOutCubic’, ‘easeInOutCubic’, ‘easeInQuart’, ‘easeOutQuart’, ‘easeInOutQuart’, ‘easeInQuint’, ‘easeOutQuint’, ‘easeInOutQuint’, ‘easeInSine’, ‘easeOutSine’, ‘easeInOutSine’, ‘easeInExpo’, ‘easeOutExpo’, ‘easeInOutExpo’, ‘easeInCirc’, ‘easeOutCirc’, ‘easeInOutCirc’, ‘easeInElastic’, ‘easeOutElastic’, ‘easeInOutElastic’, ‘easeInBack’, ‘easeOutBack’, ‘easeInOutBack’, ‘easeInBounce’, ‘easeOutBounce’, ‘easeInOutBounce’.
  • chart types: financial chart, dynamic chart, scatter chart, bubble chart, polar area chart, pie chart, radar chart, doughnut chart, bar chart, and line chart
  • upading data and options
  • supports Angular 7
  • ARIA support
  • responsiveness and ratio
  • events: onHover, onClick
  • tooltip modes point, nearest, index, dataset, x, and y
  • comparision table

You may also like...