🎯 SithasoApex Component - Complete Demo

Vanilla JavaScript web component for beautiful, responsive charts

📈 1. Simple Line Chart

Code 
<sithaso-apex
  id="simple-line-chart"
  type="line"
  title="Website Traffic"
  x-axis-title="Days"
  y-axis-title="Visitors"
  y-axis-output-format="thousand"
  categories='["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]'
  data='[{"name": "Daily Visitors", "data": [1200, 1350, 1180, 1420, 1680, 1890, 2100], "color": "#008FFB"}]'
  height="350px"
></sithaso-apex>

📈 1.1 Runtime Line Chart

Runtime Code 
// Example runtime initialization
    const el = document.getElementById('simple-line-chart-runtime');
    el.clear();
    el.addCategories(['Mon','Tue','Wed','Thu','Fri','Sat','Sun']);
    el.addSeries('Daily Visitors', '#008FFB', [1200,1350,1180,1420,1680,1890,2100]);
    el.refresh();

📈 2. Simple Line Chart (Rotated XAxis Labels)

📈 2.1 Runtime Rotated Line Chart

Runtime Code 
// Example runtime initialization
const el = document.getElementById('line-chart-no-rotation-runtime');
el.clear();
el.addCategories(['Mon','Tue','Wed','Thu','Fri','Sat','Sun']);
el.addSeries('Daily Visitors', '#008FFB', [1200,1350,1180,1420,1680,1890,2100]);
el.refresh();

📈 3. Line Chart (Mutliple Series)

📈 3.1 Runtime Line Chart (Multiple Series)

Runtime Code 
// Example runtime initialization
const el = document.getElementById('line-chart-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May']);
el.addSeries('Revenue', '#008FFB', [100,120,140,160,180]);
el.addSeries('Target', '#00E396', [110,130,135,155,175]);
el.refresh();

📈 4. Straight Line Chart

📈 4.1 Runtime Straight Line Chart

Runtime Code 
// Example runtime initialization
  const el = document.getElementById('line-chart-straight-runtime');
  el.clear();
  el.addCategories(['Jan','Feb','Mar','Apr','May']);
  el.addSeries('Revenue', '#008FFB', [100,120,140,160,180]);
  el.addSeries('Target', '#00E396', [110,130,135,155,175]);
  el.refresh();

📈 5. Straight Line Chart

📈 5.1 Runtime Stock Price Chart

Runtime Code 
// Example runtime initialization
  const el = document.getElementById('stock-price-chart-runtime');
  el.clear();
  el.addCategories(['9:00','10:00','11:00','12:00','13:00','14:00','15:00']);
  el.addSeries('Stock Price', '#FF4560', [100,105,98,112,108,115,120]);
  el.refresh();

📈 6. Step Line Chart

📈 6.1 Runtime Step Line Chart

Runtime Code 
// Example runtime initialization
  const el = document.getElementById('temperature-chart-runtime');
  el.clear();
  el.addCategories(['00:00','04:00','08:00','12:00','16:00','20:00','24:00']);
  el.addSeries('Temperature', '#00E396', [15,15,22,22,28,28,18]);
  el.refresh();

📈 7. Dashed Line Chart

📈 7.1 Runtime Dashed Line Chart

Runtime Code 
// Example runtime initialization
  const el = document.getElementById('project-progress-chart-runtime');
  el.clear();
  el.addCategories(['Week 1','Week 2','Week 3','Week 4','Week 5','Week 6','Week 7']);
  el.addSeries('Planned', '#FEB019', [10,25,40,60,75,90,100]);
  el.SetSeriesDashed('Planned', true);
  el.addSeries('Actual', '#FF4560', [30,67,70,90,100,100,100]);
  el.SetSeriesDashed('Actual', true);
  el.refresh();

📈 8. Realtime Line Chart

📈 8.1 Runtime Realtime Line Chart

Runtime Code 
// Example runtime initialization
const el = document.getElementById('realtime-chart-runtime');
el.clear();
el.addCategories(['12:00','12:01','12:02','12:03','12:04','12:05','12:06','12:07','12:08','12:09']);
el.addSeries('CPU Usage', '#008FFB', [45,50,47,52,48,55,53,50,47,46]);
el.refresh();

📈 9. Line Chart with Annotations

📈 9.1 Runtime Sales Annotations

Runtime Code 
// Example runtime initialization
const el = document.getElementById('sales-annotations-chart-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May','Jun','Jul']);
el.addSeries('Sales', '#00E396', [12000,15000,18000,22000,19000,25000,28000]);
el.refresh();

📊 10. Column Chart

📊 10.1 Runtime Column Chart

Runtime Code 
// Example runtime initialization
const el = document.getElementById('monthly-revenue-column-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May','Jun']);
el.addSeries('Revenue', '#FF4560', [1200,1500,1800,2200,1900,2500]);
el.refresh();

📈 11. Column Chart Grouped

📈 11.1 Runtime Column Grouped

Runtime Code 
// Example runtime initialization
const el = document.getElementById('revenue-growth-grouped-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May']);
el.addSeries('Revenue', '#008FFB', [100,120,140,160,180]);
el.addSeries('Target', '#00E396', [110,130,135,155,175]);
el.refresh();

🥧 12. Pie Chart

🥧 12.1 Runtime Pie Chart

Runtime Code 
// Example runtime initialization
const el = document.getElementById('browser-usage-pie-runtime');
el.clear();
el.addSeries('Desktop', '#008FFB', 44);
el.addSeries('Mobile', '#00E396', 23);
el.addSeries('Tablet', '#FEB019', 33);
el.refresh();

🍩 13. Donut Chart

🍩 13.1 Runtime Donut Chart

Runtime Code 
// Example runtime initialization
const el = document.getElementById('browser-market-donut-runtime');
el.clear();
el.addSeries('Chrome','#008FFB',65);
el.addSeries('Firefox','#00E396',20);
el.addSeries('Safari','#FEB019',10);
el.addSeries('Other','#FF4560',5);
el.refresh();

📊 14. Basic Area Chart

📊 14.1 Runtime Basic Area Chart

Runtime Code 
const el = document.getElementById('monthly-revenue-area-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep']);
el.addSeries('Revenue', '#008FFB', [30,40,35,50,49,60,70,91,125]);
el.refresh();

🌊 15. Spline Area Chart

🌊 15.1 Runtime Spline Area Chart

Runtime Code 
const el = document.getElementById('smooth-data-area-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May','Jun','Jul']);
el.addSeries('Series 1', '#008FFB', [31,40,28,51,42,109,100]);
el.addSeries('Series 2', '#00E396', [11,32,45,32,34,52,41]);
el.refresh();

📉 16. Area Chart with Negative Values

📉 16.1 Runtime Area Chart with Negative Values

Runtime Code 
const el = document.getElementById('profit-loss-area-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep']);
el.addSeries('Profit', '#00E396', [10,41,35,51,49,62,69,91,148]);
el.addSeries('Loss', '#FF4560', [-10,-20,-15,-25,-30,-35,-40,-45,-50]);
el.refresh();

📚 17. Stacked Area Chart

📚 17.1 Runtime Stacked Area Chart

Runtime Code 
const el = document.getElementById('traffic-sources-stacked-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep']);
el.addSeries('Organic Search', '#008FFB', [44,55,57,56,61,58,63,60,66]);
el.addSeries('Direct', '#00E396', [76,85,101,98,87,105,91,114,94]);
el.addSeries('Social Media', '#FEB019', [35,41,36,26,45,48,52,53,41]);
el.refresh();

📈 18. Range Area Chart

📈 18.1 Runtime Range Area Chart

Runtime Code 
const el = document.getElementById('range-area-chart-runtime');
el.clear();
el.addSeriesColor('New York Temperature', '#008FFB');
el.addSeriesPoint('New York Temperature', 'Jan', [-2, 4]);
el.addSeriesPoint('New York Temperature', 'Feb', [-1, 6]);
el.addSeriesPoint('New York Temperature', 'Mar', [3, 10]);
el.addSeriesPoint('New York Temperature', 'Apr', [8, 16]);
el.addSeriesPoint('New York Temperature', 'May', [13, 22]);
el.addSeriesPoint('New York Temperature', 'Jun', [18, 26]);
el.addSeriesPoint('New York Temperature', 'Jul', [21, 29]);
el.addSeriesPoint('New York Temperature', 'Aug', [21, 28]);
el.addSeriesPoint('New York Temperature', 'Sep', [17, 24]);
el.addSeriesPoint('New York Temperature', 'Oct', [11, 18]);
el.addSeriesPoint('New York Temperature', 'Nov', [6, 12]);
el.addSeriesPoint('New York Temperature', 'Dec', [1, 7]);
el.refresh();

📍 19. Scatter Plot with Axis Titles

📍 19.1 Runtime Scatter Plot with Axis Titles

Runtime Code 
const el = document.getElementById('data-correlation-scatter-runtime');
el.clear();
el.addSeriesColor('Data Points', '#008FFB');
el.addSeriesPoint('Data Points', 10, 20);
el.addSeriesPoint('Data Points', 15, 25);
el.addSeriesPoint('Data Points', 20, 30);
el.addSeriesPoint('Data Points', 25, 35);
el.addSeriesPoint('Data Points', 30, 40);
el.refresh();

🎯 20. Radial Bar

🎯 20.1 Runtime Radial Bar

Runtime Code 
// Example runtime initialization
const el = document.getElementById('progress-radial-bar-runtime');
el.clear();
el.addSeries('Progress', '#008FFB', 70);
el.addSeries('Score', '#00E396', 80);
el.addSeries('Rating', '#FEB019', 90);
el.refresh();

🏏 21. Radial Bar

🏏 21.1 Runtime Radial Chart

Runtime Code 
// Example runtime initialization
const el = document.getElementById('cricket-score-radial-runtime');
el.clear();
el.addSeries('Cricket', '#008FFB', 70);
el.refresh();

🏏 22. Radial Bar

🏏 22.1 Runtime Dashed Radial Chart

Runtime Code 
// Example runtime initialization
const el = document.getElementById('cricket-dashed-radial-runtime');
el.clear();
el.addSeries('Cricket', '#008FFB', 70);
el.refresh();

📊 23. Horizontal Bar Chart

📊 23.1 Runtime Horizontal Bar Chart

Runtime Code 
const el = document.getElementById('horizontal-bar-chart-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May']);
el.addSeries('Revenue', '#008FFB', [100,120,140,160,180]);
el.refresh();

📈 24. Horizontal Bar Grouped

📈 24.1 Runtime Horizontal Bar Grouped

Runtime Code 
const el = document.getElementById('horizontal-bar-grouped-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May']);
el.addSeries('Revenue', '#008FFB', [100,120,140,160,180]);
el.addSeries('Target', '#00E396', [110,130,135,155,175]);
el.refresh();

📡 25. Radar Chart

📡 25.1 Runtime Radar Chart

Runtime Code 
const el = document.getElementById('radar-comparison-runtime');
el.clear();
el.addCategories(['Strength','Speed','Endurance','Agility','Technique','Luck']);
el.addSeries('Car 1', '#AA00FF', [80,50,30,40,100,20]);
el.refresh();

📡 25a. Radar Chart - Multi Series

📡 25a.1 Radar Chart - Multi Series

Runtime Code 
const el = document.getElementById('radar-multi-series-runtime');
el.clear();
el.addCategories(['2011','2012','2013','2014','2015','2016']);
el.addSeries('Series 1', '#AA00FF', [80,50,30,40,100,20]);
el.addSeries('Series 2', '#FF0066', [20,30,40,80,20,80]);
el.addSeries('Series 3', '#00AAFF', [44,76,78,13,43,10]);
el.refresh();

🌐 26. Polar Area Chart

26.1 Runtime Polar Area Chart

Runtime Code 
const el = document.getElementById('example-26-chart-runtime');
    el.clear();
    el.addSeries('House A', '#FF7A59', 44);
    el.addSeries('House B', '#FFD166', 20);
    el.addSeries('House C', '#06D6A0', 13);
    el.addSeries('House D', '#4CC9F0', 43);
    el.addSeries('House E', '#7209B7', 27);
    el.refresh();

📊 27. Stacked Column Chart

27.1 Runtime Stacked Column Chart

Runtime Code 
// Example runtime initialization
const el = document.getElementById('example-27-chart-runtime');
el.clear();
el.addCategories(['Q1','Q2','Q3','Q4']);
el.addSeries('Product A', '#008FFB', [44,55,41,67]);
el.addSeries('Product B', '#00E396', [13,23,20,8]);
el.addSeries('Product C', '#FEB019', [11,17,15,15]);
el.refresh();

📈 28. Stacked Area Chart

28.1 Runtime Stacked Area Chart

Runtime Code 
const el = document.getElementById('example-28-chart-runtime');
el.clear();
el.addCategories(['Jan','Feb','Mar','Apr','May','Jun','Jul']);
el.addSeries('Organic', '#008FFB', [44,55,41,67,22,43,21]);
el.addSeries('Direct', '#00E396', [13,23,20,8,13,27,33]);
el.addSeries('Referral', '#FEB019', [11,17,15,15,21,14,22]);
el.refresh();

📊 29. Stacked Bar Chart

29.1 Runtime Stacked Bar Chart

Runtime Code 
const el = document.getElementById('example-29-chart-runtime');
        el.clear();
        el.addCategories(['2016','2017','2018','2019','2020']);
        el.addSeries('North', '#008FFB', [44,55,41,37,22]);
        el.addSeries('South', '#00E396', [13,23,20,8,13]);
        el.addSeries('East', '#FEB019', [11,17,15,15,21]);
        el.refresh();

🥧 30. UIF Contribution Pie Chart (Runtime Update)

This example demonstrates runtime chart updates using B4X-style methods:

📊 31. Beneficiary Status Column Chart (Runtime Update)

This example demonstrates runtime chart updates for column charts using B4X-style methods:

✨ 32. Sparkline Area Chart

Code 
<sithaso-apex
  id="example-32-sparkline"
  type="area"
  curve="straight"
  grid-show="false"
  tooltip-enabled="false"
  title="$424,652"
  subtitle="Sales"
  title-font-size="24px"
  subtitle-font-size="14px"
  data='[{"name":"Sales","data":[47,45,54,38,56,24,65,31,37,39,62,51], "color":"#008FFB"}]'
  sparkline="true"
  height="160"
  marker-size="0"
  show-legend="false"
  show-data-labels="false"
  show-toolbar="false"
></sithaso-apex>

32.1 Runtime Sparkline Area Chart

Runtime Code 
const el = document.getElementById('example-32-chart-runtime');
      el.clear();
      el.addSeries('Sales', '#008FFB', [47,45,54,38,56,24,65,31,37,39,62,51]);
      el.refresh();

✨ 33. Sparkline Line Chart

Code 
<sithaso-apex
  id="example-33-sparkline"
  type="line"
  curve="straight"
  grid-show="false"
  tooltip-enabled="false"
  title="$424,652"
  subtitle="Sales"
  title-font-size="24px"
  subtitle-font-size="14px"
  data='[{"name":"Sales","data":[47,45,54,38,56,24,65,31,37,39,62,51], "color":"#008FFB"}]'
  sparkline="true"
  height="160"
  marker-size="0"
  show-legend="false"
  show-data-labels="false"
  show-toolbar="false"
></sithaso-apex>

33.1 Runtime Sparkline Line Chart

Runtime Code 
const el = document.getElementById('example-33-chart-runtime');
el.clear();
el.addSeries('Sales', '#008FFB', [47,45,54,38,56,24,65,31,37,39,62,51]);
el.refresh();

✨ 34. Sparkline Column Chart

Code 
<sithaso-apex
  id="example-34-sparkline"
  type="column"
  curve="straight"
  grid-show="false"
  tooltip-enabled="false"
  title="$424,652"
  subtitle="Sales"
  title-font-size="24px"
  subtitle-font-size="14px"
  data='[{"name":"Sales","data":[47,45,54,38,56,24,65,31,37,39,62,51], "color":"#008FFB"}]'
  sparkline="true"
  height="160"
  marker-size="0"
  show-legend="false"
  show-data-labels="false"
  show-toolbar="false"
></sithaso-apex>

34.1 Runtime Sparkline Column Chart

Runtime Code 
const el = document.getElementById('example-34-chart-runtime');
el.clear();
el.addSeries('Sales', '#008FFB', [47,45,54,38,56,24,65,31,37,39,62,51]);
el.refresh();

🔧 Dynamic Options Demo

Click the buttons below to dynamically update chart options using the setter: