Charts Overview

Nova Charts is a library created to provide potential consumers with solutions for various data visualizations that conform with the Nova Design Language. It's designed to solve common patterns identified by UX designers, but also be very flexible so that pieces of visualizations can be overridden or entirely new visualizations can be customized quickly. As with anything, the more customizations you wish to have, the more work and maintenance you will absorb within your own app's code.

Getting Started

Getting started with charts is quite simple:

1. Include charts in your package.json file

   "devDependencies": {
       ...
       "@nova-ui/charts": >>last release version<<,
       ...
   }

2. Add a reference to charts styles in your angular.json file. Without this step, the charts will render, but will look and act in unpredictable ways.

   "projects": {
       "your-project": {
           ...
           "architect": {
               ...
               "styles": [
                   "src/styles.less",
                   "./node_modules/@nova-ui/bits/bundles/css/styles.css",
                   "./node_modules/@nova-ui/charts/bundles/css/styles.css"
                ],

3. Import NuiChartsModule

   import { NuiChartsModule } from "@nova-ui/charts";
   
   @NgModule({
       declarations: [ ... ],
       imports: [ NuiChartsModule ],
       exports: [ ... ],
       providers: [ ... ]
   })

4. Copy/Paste any of our examples (see TOC below) to create your own component, add it to your view and then play around with the options.

TOC

• Layout
• Chart Types
  • Line
  • Bar
    • Bucketed Bar
    • Status
    • Waterfall
  • Pie and Donut
  • Spark
• Plugins
  • Tooltips
  • Popovers
• Thresholds
• Timeframe Selection
• Advanced Usage
  • Chart
  • Legend
  • Input Structure
    • Data
    • Colors
    • Markers
  • Events
  • Grid
  • Scales
    • Domains
    • Formatters