Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/htmlelements/smart-chart

Chart Web Component - Chart Custom Element - Charting - https://www.htmlelements.com/
https://github.com/htmlelements/smart-chart

angular-chart bootstrap-charts canvas-chart chart chart-component chart-custom-element chart-library chart-web-component charting charting-web-component charts javascript-chart javascript-charting material-charts polymer-charts react-chart vue-chart

Last synced: 7 days ago
JSON representation

Chart Web Component - Chart Custom Element - Charting - https://www.htmlelements.com/

Host: GitHub
URL: https://github.com/htmlelements/smart-chart
Owner: HTMLElements
Created: 2019-04-19T13:59:47.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2020-01-10T06:49:06.000Z (almost 5 years ago)
Last Synced: 2024-10-13T08:19:08.209Z (about 1 month ago)
Topics: angular-chart, bootstrap-charts, canvas-chart, chart, chart-component, chart-custom-element, chart-library, chart-web-component, charting, charting-web-component, charts, javascript-chart, javascript-charting, material-charts, polymer-charts, react-chart, vue-chart
Size: 5.86 KB
Stars: 3
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

## Smart Chart

# [Smart Chart Element](https://www.htmlelements.com)[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Get%20over%2020%20free%20custom%20elements%20based%20on%20SmartHTMLElements%20&url=https://www.htmlelements.com/&via=htmlelements&hashtags=bootstrap,design,templates,autocomplete,chart,typeahead,developers,webcomponents,customelements,polymer,material)

[![Price](https://img.shields.io/badge/price-$399-0098f7.svg)](https://github.com/HTMLElements/smart-chart/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-chart.svg?style=flat)](https://www.npmjs.com/package/@smarthtmlelements/smart-chart)
[![GitHub package version](https://img.shields.io/github/package-json/v/HTMLElements/smart-chart.svg)](https://github.com/HTMLElements/smart-chart)
[![](https://img.shields.io/website-up-down-green-red/https/shields.io.svg?label=www.htmlelements.com)](https://www.htmlelements.com)

Feature-Complete Chart Web Component with more than 30 different Data Visualization options. The Chart Types supported are listed: [Chart Types](https://www.htmlelements.com/docs/chart-types/ "Chart Types").

![Best Chart Web Component](https://www.htmlelements.com/wp-content/docs/chart-custom-element-2.png "Best Chart Web Component")

Our Chart Web Component is written in JavaScript and CSS. It does not depend on any other third-party scripts. The rendering is achieved with SVG and HTML5 canvas. The Chart works well on mobile browsers and is the most feature-complete chart available in the web components world.
Data displayed on the Chart can be formatted in multiple different ways. For example, the charting element has a property called 'formatSettings' with the following data formatting options.

* **decimalSeparator** - character used as a decimal separator. If not specified, the default separator is _'.'_
* **thousandsSeparator** - character used as thousands separator. Default value is _','_
* **decimalPlaces** - number of digits after the decimal separator. Default value is _2_ for floating point numbers.
* **negativeWithBrackets** - boolean which specifies whether to display negative numbers in brackets. Default value is _false_.
* **prefix** - any string which will be added as a prefix. Default value is empty.
* **sufix** - any string which will be added as a sufix. Default value is empty.
* **dateFormat** - optional date format string. This property is applicable only when displaying Date objects.

![](https://www.htmlelements.com/wp-content/docs/chart-custom-element-18.png)

The image below illustrates the Axes supported by the web component. Smart.Chart has two main types of axes - valueAxis and xAxis. Typically the valueAxis represents the vertical axis in the chart although you may choose to rotate the axes and in this case the valueAxis will be displayed horizontally. ![Chart Web Component Axes](https://www.htmlelements.com/wp-content/docs/chart-custom-element-16.png "Chart Axes")

Smart.Chart also ships with 32 built-in color schemes which are used to automatically set colors for different series. You can change the color scheme by setting the colorScheme property of the chart. The available value are from 'scheme01' to 'scheme32'. By setting its 'theme' property, users can Data Visualize their graphics in 'Light' and 'Dark' mode. Smart.Chart is based on: [jqxChart](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/ "jqxChart").

We invite you to look at Chart Web Component demos: [Chart overview](https://www.htmlelements.com/demos/chart/overview/)

## License

Commercial