Chartlite supports multiple data input formats for maximum flexibility
Classic array of objects with x and y properties
import { LineChart } from '@chartlite/core';
new LineChart('#chart', {
data: [
{ x: 'Jan', y: 4200 },
{ x: 'Feb', y: 4800 },
{ x: 'Mar', y: 5200 }
]
}).render();Just pass an array of numbers - perfect for quick prototypes
import { BarChart } from '@chartlite/core';
new BarChart('#chart', {
data: [30, 45, 38, 52, 60]
}).render();
// Auto-generates x values: 0, 1, 2, 3, 4Intuitive format inspired by data frames and spreadsheets
import { AreaChart } from '@chartlite/core';
new AreaChart('#chart', {
data: {
x: ['Q1', 'Q2', 'Q3', 'Q4'],
y: [45000, 52000, 48000, 61000]
},
curve: 'smooth'
}).render();Define data structure upfront - great for complex datasets
import { LineChart } from '@chartlite/core';
new LineChart('#chart', {
data: {
series: [
{
name: 'Revenue',
dataKey: 'revenue',
color: '#3b82f6'
}
],
data: [
{ month: 'Jan', revenue: 4200 },
{ month: 'Feb', revenue: 4800 },
{ month: 'Mar', revenue: 5200 }
]
},
curve: 'smooth'
}).render();Specify which field to use for the x-axis
import { BarChart } from '@chartlite/core';
new BarChart('#chart', {
data: {
series: [
{
name: 'Sales',
dataKey: 'sales',
color: '#10b981'
}
],
data: [
{ product: 'Product A', sales: 320 },
{ product: 'Product B', sales: 280 },
{ product: 'Product C', sales: 245 }
],
xKey: 'product' // Specify x-axis key
},
orientation: 'horizontal'
}).render();Column format with multiple y series - uses first series by default
import { AreaChart } from '@chartlite/core';
new AreaChart('#chart', {
data: {
x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
y: {
temperature: [22, 24, 26, 25, 27],
humidity: [60, 58, 55, 62, 59]
// Uses 'temperature' (first series)
}
},
colors: ['#f59e0b'],
fillOpacity: 0.2
}).render();The most powerful format - supports all features including legends
import { LineChart } from '@chartlite/core';
new LineChart('#chart', {
data: {
series: [
{ name: 'Revenue', dataKey: 'revenue' },
{ name: 'Costs', dataKey: 'costs' },
{ name: 'Profit', dataKey: 'profit' }
],
data: [
{ month: 'Jan', revenue: 4200, costs: 2800, profit: 1400 },
{ month: 'Feb', revenue: 4800, costs: 3200, profit: 1600 },
{ month: 'Mar', revenue: 5200, costs: 3400, profit: 1800 }
]
},
curve: 'smooth',
showLegend: true
}).render();