@siemens/charts-ng
Advanced tools
The Element chart library for Angular based on ECharts. Going through the roof. Stoinks.
To use the Element Charts Angular components in your project, add them to your dependencies by executing:
npm install --save @siemens/charts-ng
You also have to install the peer dependencies of Element Charts.
npm install echarts --save
Import the library to your Angular AppModule, mostly residing in your
src/app/app.modules.ts file as follows:
// [...]
// Import this library
import { SiChartsNgModule } from '@siemens/charts-ng';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SiChartsNgModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Run npm run charts:test to perform the unit tests via Karma.
You can set a seed for running the tests in a specific using an environment variable: SEED=71384 yarn lib:test
The following applies for code and documentation of the git repository, unless explicitly mentioned.
Copyright (c) Siemens 2016 - 2025
MIT, see LICENSE.md.
48.0.1 (2025-09-05)
NgxDatatableConfig from upstream (2fb7903)datatable: INgxDatatableConfig is deprecated in favor of upstream NgxDatatableConfig.
Replace INgxDatatableConfig imports with NgxDatatableConfig from @siemens/ngx-datatable:
// Before import { INgxDatatableConfig } from '@siemens/element-ng/datatable';
// After import { NgxDatatableConfig } from '@siemens/ngx-datatable';
t-function to locally override $localize (b2916f4), closes #436si-icon with si-icon-next (cb06a07)routerLink for launchpad apps (bf78c1f)siPopover with siPopoverNext (b96e46f)si-tabs with si-tabs-next (6fbba15)SiTreeViewComponent.disableFilledIcons input (97b5aef)searchChange during initialisation (e2be687)rounded-end utility (295fc49)header-dropdown: The si-header-dropdown-item no longer shows a filled icon when the dropdown is open.
theme: The colors for the "critical" status have changed. If this
change is not desired, the old colors can be restored using this snippet in the
application's main styles.scss:
@use '@siemens/element-theme/src/theme/base-colors';
// load theme here as usual
@use '@siemens/element-theme/src/theme';
@use '@siemens/element-ng/element-ng';
// add overrides
:root {
--element-base-critical: #{base-colors.$color-red-100};
--element-status-critical: #{base-colors.$color-red-900};
--element-text-critical: #{base-colors.$color-red-700};
}
:root.app--dark {
--element-base-critical: #{base-colors.$color-red-900};
--element-status-critical: #{base-colors.$color-red-700};
--element-text-critical: #{base-colors.$color-red-100};
}
accordion: Removed SiAccordionComponent.colorVariant input without any replacement.
action-modal: Removed AlertDialogResult, EditDiscardDialogResult, ConfirmationDialogResult and DeleteConfirmationDialogResult as const objects. Use them only as type.
angular: Angular 20+ is required. Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=19.0-20.0
charts-ng: The @siemens/charts-ng package now requires ECharts version 6.0.0 or higher. Please update your dependencies accordingly. For details on ECharts 6, see: https://github.com/apache/echarts/releases/tag/6.0.0
collapsible-panel: Removed SiCollapsiblePanelComponent.toggle output use SiCollapsiblePanelComponent.panelToggle instead.
dashboards-ng: gridstack.js v12 is required. To migrate to v12,
update the package and drop the inclusion of gridstack-extra.css
in angular.json
datepicker: Removed SiDatepickerOverlayComponent.isFocused and SiDatepickerOverlayDirective.isFocused without any replacement.
datepicker: Removed SiDatepickerOverlayDirective.toggleOverlay method. Use SiDatepickerOverlayDirective.showOverlay or SiDatepickerOverlayDirective.closeOverlay methods instead.
datepicker: Removed SiDateInputDirective.dateInputDebounceTime, SiDateRangeComponent .debounceTime and SiDatepickerDirective.triggeringInput inputs without any replacement as they had no effect.
element-theme: The make-theme SCSS mixin no longer prefixes
variables with element- hence custom build-time OEM themes have
to be adapted accordingly, see:
https://element.siemens.io/architecture/theming/#build-time-custom-theme.
filtered-search: Removed following deprecated inputs:
SiFilteredSearchComponent.showIcon without any replacement.SiFilteredSearchComponent.selectedCriteriaIndex. Instead of preselecting the most relevant option, sort the options by relevance.SiFilteredSearchComponent.noMatchingCriteriaText without any replacement.SiFilteredSearchComponent.submitText. Use SiFilteredSearchComponent.submitButtonLabel instead.SiFilteredSearchComponent.items. Use SiFilteredSearchComponent.itemCountText instead.form: Removed deprecated SiFormContainerComponent.getValidationErrors method.
Use the built-in mechanism of the si-form-item to show validation errors.
See: https://element.siemens.io/components/forms-inputs/forms/#error-messages* action-modal: Removed deprecated methods:
SiActionDialogService.showAlertDialogSiActionDialogService.showConfirmationDialogSiActionDialogService.showEditDiscardDialogSiActionDialogService.showDeleteConfirmationDialogUse SiActionDialogService.showActionDialog instead.
form: Removed SiFormItemComponent.inputId and SiFormItemComponent.readonly inputs without any replacement.
form: Removed siFormItemControl directive.
Replace this directive with either the class form-control or form-check-input:
<!-- Before -->
<input type="checkbox" siFormItemControl>
<input siFormItemControl>
<!-- After -->
<input type="checkbox" class="form-check-input">
<input class="form-control">
form: Checkboxes and radio inputs (<input type="checkbox"> or <input type="radio">) must now be wrapped in a .form-check container.
Additionally, when using Bootstrap’s grid system (bs-grid), each .form-check must be placed
inside a .col-* element and cannot be a direct child of a .row.
This change is necessary to ensure proper alignment and spacing, especially for long or multiline
labels.
Before:
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Label</label>
After:
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Label</label>
</div>
form: Using multiple form-controls within a single si-form-item is no longer supported. Use si-form-fieldset to group multiple si-form-item components.
Before:
<si-form-item label="Group label">
<div class="form-check">
<input type="checkbox" id="check-1" class="form-check-input" [formControl]="check1" />
<label for="check-1">Label 1</label>
</div>
<div class="form-check">
<input type="checkbox" id="check-2" class="form-check-input" [formControl]="check2" />
<label for="check-2">Label 2</label>
</div>
</si-form-item>
After:
<si-form-fieldset label="Group label">
<si-form-item label="Label 1">
<input type="checkbox" class="form-check-input" [formControl]="check1" />
</si-form-item>
<si-form-item label="Label 2">
<input type="checkbox" class="form-check-input" [formControl]="check2" />
</si-form-item>
</si-form-fieldset>
icon: The si-icon component has been completely re-implemented
including breaking changes in the API. The main motivation of this change is
support for SVG icons and to ensure a similar behavior compared to the direct
use via CSS classes, making icon usage more interchangeable.
We recommend adjusting your code to the new si-icon. Alternatively, you may
use si-icon-legacy to preserve the previous behavior.
The most notable changes are:
icon input. Use CSS classes instead.size input. Use CSS class icon
to apply the default size via CSS or use any other
text size class.aria-label="Close".icon-stack
class to construct layered icons.Single colored icons can be converted as follows:
<!-- before -->
<si-icon icon="element-user" color="text-danger" />
<!-- after -->
<si-icon icon="element-user" class="icon text-danger" />
Important: Previously, the class icon was automatically applied. Unless not needed, it must now be applied manually. The icon class sets a fixed size of 1.5rem.
Stacked (composite) icons need to be constructed using HTML.
<!-- before -->
<si-icon
icon="element-alarm-background-filled"
color="status-danger"
stackedIcon="element-alarm-tick"
stackedColor="text-secondary"
size="display-2"
/>
<!-- after -->
<span class="icon icon-stack">
<si-icon class="si-display-lg status-danger" icon="element-alarm-background-filled" />
<si-icon class="si-display-lg text-secondary" icon="element-alarm-tick" />
</span>
For status icons, the new si-status-icon component simplifies usage even more:
<!-- before -->
<si-icon
icon="element-circle-filled"
color="status-danger"
stackedIcon="element-state-exclamation-mark"
stackedColor="status-danger-contrast"
size="display-2"
/>
<!-- after -->
<si-status-icon class="si-display-lg" status="danger" />
maps-ng: The @siemens/maps-ng package now requires ol-mapbox-style version 13.1.0 or higher. Please update your dependencies accordingly. For details on ol-mapbox-style 13, see: https://github.com/openlayers/ol-mapbox-style/releases/tag/v13.0.0
navbar-vertical: Removed SiNavbarVerticalComponent.autoCollapseDelay input without any replacement.
popover: The siPopover directive has been completely re-implemented,
including breaking changes in the API.
The main highlight is a complete accessibility support and
unified interaction.
The most notable changes are:
shown/hidden events there is one visibilityChange eventsiPopover to avoid name conflictsThe new popover was already available as a preview via siPopoverNext in v47 and is now fully
replacing the old popover with v48. If you are already using siPopoverNext, you can do a simple
search & replace removing the next suffix.
The "old" popover is still available with via the legacy entrypoint
@siemens/element-ng/popover-legacy.
Classes and selectors were renamed accordingly:
siPopover --> siPopoverLegacySiPopoverDirective --> SiPopoverLegacyDirectiveSiPopoverModule --> SiPopoverLegacyModuleUsually, the migration to new popover is simple.
If the trigger or outsideClick was modified, please read the
popover documentation
on how to properly use a popover.
In all other cases, it is sufficient to replace shown / hidden events with visibilityChange
and prefix all input / outputs with siPopover.
result-details-list: Removed ResultDetailStepState as object. Use ResultDetailStepState as type with direct string values.
search-bar: SiSearchBarComponent.searchChange is not emitted during initialisation with value input
split: Removed unused SiSplitPartComponent.headerStatusColor and SiSplitPartComponent.headerStatusIconClass inputs without any replacement.
tabs: The si-tabs component has been completely re-implemented
including breaking changes in the API. The main highlights are enhanced
accessibility, improved responsive behavior, and Angular router support.
The most notable changes are:
selectedIndex with an active input in the si-tabiconAltText in favor of enforcing headingdeselect and selectedTabIndexChange in favor of using activeChange on the si-tabThe new tabs were already available as a preview via si-tabs-next in v47 and are now fully
replacing the old tabs with v48. If you are already using si-tabs-next, you can do a simple
search & replace removing the -next suffix.
The "old" tabs are still available via legacy entrypoint @siemens/element-ng/tabs-legacy.
Classes and selectors were renamed accordingly:
si-tabset --> si-tabset-legacySiTabsetComponent --> SiTabsetLegacyComponentsi-tab --> si-tab-legacySiTabComponent --> SiTabLegacyComponentSiTabModule --> SiTabLegacyModuleWhen migrating to the new tabs, we recommend checking whether using the router based approach is applicable.
Otherwise, code needs to be changed to use the new active input
and renaming iconAltText to heading:
<!-- before -->
<si-tabset selectedTabIndex="0" (selectedTabIndexChange)="changedTab($event)">
<si-tab iconAltText="Favorites" icon="element-favorite">...</si-tab>
</si-tabset>
<!-- after -->
<si-tabset>
<si-tab heading="Favorites" icon="element-favorite" [active]="true" (activeChange)="changedTab($event)">...</si-tab>
</si-tabset>
Please note, the implementation of changedTab must also be adjusted.
tree-view: Removed SiTreeViewComponent.disableFilledIcons input.
Tree items no longer show a filled icon on selection.
tree-view: Removed SiTreeViewComponent.trackByFunction input which had no effect.
typeahead: Removed SiTypeaheadDirective.typeaheadOnMultiselectClose and SiTypeaheadDirective.typeaheadClosed output. Use SiTypeaheadDirective.typeaheadOpenChange instead.
wizard: The si-wizard now has the navigation buttons by default in the footer.
To restore the old behavior set SiWizardComponent.inlineNavigation to true:
<si-wizard inlineNavigation>
...
</si-wizard>
wizard: Removed SiWizardComponent.hasNavigation input and SiWizardComponent.cancel output. Use SiWizardComponent.hideNavigation and SiWizardComponent.wizardCancel respectively instead.
charts/gauge: Input labelFormatter should no longer be used to format the value. Use valueFormatter instead.
datepicker: SiDatepickerComponent.calenderWeekLabel input is deprecated. Use SiDatepickerComponent.calendarWeekLabel instead.
element-theme: All .si-* typography utility classes were adapted to match the
new typography system. Replace the following matches with their new
counterparts:
.si-h1-black, use .si-h1-bold instead..si-title-1-bold, use .si-h4-bold instead..si-title-1, use .si-h4 instead..si-title-2-bold, use .si-h5-bold instead..si-title-2, use .si-h5 instead..si-body-1, use .si-body-lg instead..si-body-2, use .si-body instead..si-display-1, use .si-display-xl instead..si-display-2, use .si-display-lg instead..si-display-3, use .si-display-bold instead..si-display-4, use .si-display instead.element-theme: All $si-font-size-*, $si-line-height-*, and $si-font-weight-*
variables were adapted to match the new typography system. Replace the following
matches with their new counterparts:
$si-*-h1-black, use $si-*-h1-bold instead.$si-*-title-1-bold, use $si-*-h4-bold instead.$si-*-title-1, use $si-*-h4 instead.$si-*-title-2-bold, use $si-*-h5-bold instead.$si-*-title-2, use $si-*-h5 instead.$si-*-body-1, use $si-*-body-lg instead.$si-*-body-2, use $si-*-body instead.$si-*-caption-1, use $si-*-caption instead.$si-*-display-1, use $si-*-display-xl instead.$si-*-display-2, use $si-*-display-lg instead.$si-*-display-3, use $si-*-display-bold instead.$si-*-display-4, use $si-*-display instead.status-counter: The component si-icon-status has been renamed to
si-status-counter. The class name changes from SiIconStatusComponent
to SiStatusCounterComponent. The old names still work and will
be removed in future release.
To migrate to the new names, change imports from SiIconStatusComponent
or SiIconStatusModule to SiStatusCounterComponent and replace
si-icon-status with si-status-counter in all templates.
FAQs
Element Charts library.
The npm package @siemens/charts-ng receives a total of 706 weekly downloads. As such, @siemens/charts-ng popularity was classified as not popular.
We found that @siemens/charts-ng demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.