@anjuna/charts

Authored with Stencil.js, @anjuna/charts is exported as native standard custom elements and can be used in any UI application. These components make up the atomic and molecular layer of the Zuora Design System.

Getting Started

To get started with Anjuna, there are a few things to get set up.

Include the Theme

While using Bootstrap under the hood, Anjuna has no runtime dependency on global style outside the theme. Anjuna uses a runtime palette set by the consuming application, so it will always be consistent with application. The theme can be included by either adding it to the application HTML or CSS.

<!-- HTML -->
<link href="//cdn.zuora.com/@anjuna/[email protected]/dist/css/theme.css" rel="stylesheet">

/* CSS */
@import '~@anjuna/theme/dist/css/theme.css';

Note: the polyfill for CSS variables does not work with dynamically loaded imports. For CSS variables to work in IE, the theme needs to be part of your application's compiled style.

Include the Web Components

For vanilla apps, the best way to use the components is to include them via CDN in the header of your index.html file.

Note: The web components imports should be the LAST script tags in your index.html file

<!-- Load the components -->
<script src="//cdn.zuora.com/@anjuna/[email protected]/dist/anjuna-core.js"></script>
<script src="//cdn.zuora.com/@anjuna/[email protected]/dist/anjuna-charts.js"></script>