npm package: @smarthtmlelements/smart-chart
Description: Chart Web Component - Chart Custom Element - https://www.HTMLElements.com
Author: https://www.htmlelements.com
Latest version: 6.2.0

## 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)

&nbsp;
[![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