### Install Smart Chart via npm
Source: https://context7.com/htmlelements/smart-chart/llms.txt
Use this command to add the Smart Chart package to your project dependencies.
```bash
npm install @smarthtmlelements/smart-chart
```
--------------------------------
### Initialize Smart Chart Component
Source: https://context7.com/htmlelements/smart-chart/llms.txt
Basic setup for the custom element including data source binding and series group configuration.
```html
```
--------------------------------
### Configure Data Format Settings
Source: https://context7.com/htmlelements/smart-chart/llms.txt
Define numeric and date formatting rules for axes and tooltips using the formatSettings property.
```javascript
const chart = document.getElementById('chart');
chart.formatSettings = {
decimalSeparator: '.',
thousandsSeparator: ',',
decimalPlaces: 2,
negativeWithBrackets: false,
prefix: '$',
sufix: '',
dateFormat: 'MMM dd, yyyy'
};
// Example with currency formatting
chart.dataSource = [
{ product: 'Widget A', revenue: 15000.50 },
{ product: 'Widget B', revenue: 22500.75 },
{ product: 'Widget C', revenue: -5000.25 }
];
chart.seriesGroups = [{
type: 'column',
series: [{
dataField: 'revenue',
displayText: 'Revenue'
}]
}];
// Output displays: $15,000.50, $22,500.75, ($5,000.25)
```
--------------------------------
### Apply Color Schemes and Themes
Source: https://context7.com/htmlelements/smart-chart/llms.txt
Set the visual appearance of the chart using built-in color schemes and theme modes.
```javascript
const chart = document.getElementById('chart');
// Set color scheme (available: scheme01 through scheme32)
chart.colorScheme = 'scheme01';
// Set theme (available: 'light' or 'dark')
chart.theme = 'dark';
// Example with multiple series using automatic coloring
chart.seriesGroups = [{
type: 'line',
series: [
{ dataField: 'sales2021', displayText: '2021 Sales' },
{ dataField: 'sales2022', displayText: '2022 Sales' },
{ dataField: 'sales2023', displayText: '2023 Sales' }
]
}];
// Each series automatically receives a distinct color from the scheme
```
--------------------------------
### Configure Chart Axes
Source: https://context7.com/htmlelements/smart-chart/llms.txt
Customize axis labels, grid lines, and scale intervals for both xAxis and valueAxis.
```javascript
const chart = document.getElementById('chart');
chart.xAxis = {
dataField: 'date',
displayText: 'Time Period',
type: 'date',
baseUnit: 'month',
valuesOnTicks: true,
gridLines: {
visible: true,
color: '#CCCCCC'
}
};
chart.valueAxis = {
displayValueAxis: true,
description: 'Values',
axisSize: 'auto',
minValue: 0,
maxValue: 100,
unitInterval: 10,
gridLines: {
visible: true
},
labels: {
horizontalAlignment: 'right'
}
};
```
--------------------------------
### Configure Multiple Series Groups in Smart Chart
Source: https://context7.com/htmlelements/smart-chart/llms.txt
Combine different chart types by defining multiple objects within the seriesGroups array.
```javascript
const chart = document.getElementById('chart');
chart.dataSource = [
{ month: 'Jan', revenue: 5000, expenses: 3000, profit: 2000 },
{ month: 'Feb', revenue: 6000, expenses: 3500, profit: 2500 },
{ month: 'Mar', revenue: 7500, expenses: 4000, profit: 3500 },
{ month: 'Apr', revenue: 8000, expenses: 4500, profit: 3500 }
];
chart.xAxis = {
dataField: 'month'
};
chart.seriesGroups = [
{
type: 'column',
series: [
{ dataField: 'revenue', displayText: 'Revenue' },
{ dataField: 'expenses', displayText: 'Expenses' }
]
},
{
type: 'line',
series: [
{ dataField: 'profit', displayText: 'Profit' }
]
}
];
```
--------------------------------
### Define Chart Types in Smart Chart
Source: https://context7.com/htmlelements/smart-chart/llms.txt
Set the type property within seriesGroups to switch between various visualization styles like column, line, pie, and area.
```javascript
const chart = document.getElementById('chart');
// Column Chart
chart.seriesGroups = [{
type: 'column',
series: [{ dataField: 'value', displayText: 'Values' }]
}];
// Line Chart
chart.seriesGroups = [{
type: 'line',
series: [{ dataField: 'value', displayText: 'Trend' }]
}];
// Pie Chart
chart.seriesGroups = [{
type: 'pie',
series: [{
dataField: 'value',
displayText: 'displayText',
labelRadius: 120,
initialAngle: 15,
radius: 100
}]
}];
// Area Chart
chart.seriesGroups = [{
type: 'area',
series: [{ dataField: 'value', displayText: 'Area' }]
}];
// Supported types include: column, line, pie, area, bar, scatter,
// bubble, donut, polar, spider, waterfall, rangecolumn, and more
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.