Create beautiful, accessible charts using the V2 JSON Layout API
Create vertical bar charts with labels and color schemes. Bar charts are perfect for comparing values across categories.
const config = {
version: 2,
layoutId: "bar-charts-demo",
breakpoints: { xs: 1, md: 2 },
gap: "1.5rem",
items: [
{
content: {
type: "chart",
chartType: "bar",
values: [25, 50, 75, 100, 60],
labels: ["A", "B", "C", "D", "E"],
height: "200px"
}
},
{
content: {
type: "chart",
chartType: "bar",
values: [120, 180, 140, 200, 160],
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
colorScheme: "success",
showValues: true,
height: "200px"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo1-output', config);Line charts show trends over time. Area charts add a filled region below the line for visual impact.
const config = {
version: 2,
layoutId: "line-charts-demo",
breakpoints: { xs: 1, md: 2 },
gap: "1.5rem",
items: [
{
content: {
type: "chart",
chartType: "line",
values: [20, 45, 35, 60, 50, 75, 65, 85],
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
title: "Monthly Trend",
curved: true,
colorScheme: "cool",
height: "250px"
}
},
{
content: {
type: "chart",
chartType: "area",
values: [25, 40, 35, 55, 45, 65, 60, 75],
labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6", "Q7", "Q8"],
colorScheme: "success",
height: "250px"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo2-output', config);Pie and doughnut charts show proportional data. Enable legends and accessible color schemes for better usability.
const config = {
version: 2,
layoutId: "pie-charts-demo",
breakpoints: { xs: 1, md: 3 },
gap: "1.5rem",
items: [
{
content: {
type: "chart",
chartType: "pie",
values: [35, 25, 20, 15, 5],
labels: ["Product A", "Product B", "Product C", "Product D", "Other"],
showValues: true,
showLegend: true,
colorScheme: "rainbow",
height: "280px"
}
},
{
content: {
type: "chart",
chartType: "doughnut",
values: [45, 30, 25],
labels: ["Desktop", "Mobile", "Tablet"],
title: "Devices",
showLegend: true,
colorScheme: "cool",
height: "280px"
}
},
{
content: {
type: "chart",
chartType: "pie",
values: [40, 35, 25],
labels: ["Category 1", "Category 2", "Category 3"],
showLegend: true,
colorScheme: "accessible",
height: "280px"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo3-output', config);Compact inline charts perfect for dashboards and KPI displays. Available in line and bar styles.
const config = {
version: 2,
layoutId: "sparklines-demo",
breakpoints: { xs: 1, sm: 2, lg: 4 },
gap: "1rem",
items: [
{
content: {
type: "card",
title: "Revenue",
body: {
type: "chart",
chartType: "sparkline",
values: [10, 15, 12, 18, 20, 17, 22, 25],
colorScheme: "success",
size: "md"
}
}
},
{
content: {
type: "card",
title: "Users",
body: {
type: "chart",
chartType: "sparkline",
values: [50, 55, 52, 60, 58, 65, 70, 68],
colorScheme: "primary",
size: "md"
}
}
},
{
content: {
type: "card",
title: "Orders",
body: {
type: "chart",
chartType: "sparkline-bar",
values: [8, 12, 10, 15, 11, 18, 14, 20],
colorScheme: "warm",
size: "md"
}
}
},
{
content: {
type: "card",
title: "Views",
body: {
type: "chart",
chartType: "sparkline",
values: [100, 120, 110, 140, 130, 150, 145, 160],
colorScheme: "cool",
size: "md"
}
}
}
]
};
RSL.JSONLayout.renderLayout('#demo4-output', config);RSL Charts includes 7 built-in color schemes: primary, success, warm, cool, mono, rainbow, and accessible.
const schemes = ['primary', 'success', 'warm', 'cool', 'mono', 'rainbow'];
const config = {
version: 2,
layoutId: "color-schemes-demo",
breakpoints: { xs: 1, sm: 2, lg: 3 },
gap: "1.5rem",
items: schemes.map(scheme => ({
content: {
type: "card",
title: scheme.charAt(0).toUpperCase() + scheme.slice(1),
body: {
type: "chart",
chartType: "bar",
values: [60, 80, 70, 90, 75],
colorScheme: scheme,
height: "120px"
}
}
}))
};
RSL.JSONLayout.renderLayout('#demo5-output', config);Combine multiple chart types in a responsive dashboard layout with cards and sparklines.
const dashboardConfig = {
version: 2,
layoutId: "dashboard-demo",
breakpoints: { xs: 1, md: 2, lg: 4 },
gap: "1.5rem",
items: [
// KPI Cards with Sparklines
{
content: {
type: "card",
title: "Total Revenue",
subtitle: "$124,500",
body: {
type: "chart",
chartType: "sparkline",
values: [80, 85, 90, 88, 95, 100, 98, 105],
colorScheme: "success",
size: "md"
}
}
},
{
content: {
type: "card",
title: "Active Users",
subtitle: "2,847",
body: {
type: "chart",
chartType: "sparkline",
values: [200, 220, 210, 240, 260, 255, 280, 285],
colorScheme: "primary",
size: "md"
}
}
},
{
content: {
type: "card",
title: "Conversion Rate",
subtitle: "3.2%",
body: {
type: "chart",
chartType: "sparkline-bar",
values: [2.8, 3.0, 2.9, 3.1, 3.0, 3.2, 3.1, 3.2],
colorScheme: "warm",
size: "md"
}
}
},
{
content: {
type: "card",
title: "Bounce Rate",
subtitle: "42%",
body: {
type: "chart",
chartType: "sparkline",
values: [48, 46, 45, 44, 43, 42, 43, 42],
colorScheme: "cool",
size: "md"
}
}
}
]
};
RSL.JSONLayout.renderLayout('#demo6-output', dashboardConfig);