Charts Component

Embed interactive charts with bar, line, pie, and other visualization types using the rb-chart web component.

Table of Contents

Live Examples

Click Configuration on any demo to switch to the Configuration view with a copy button.

Line Chart

If a dashboard has one chart, it is a line showing a metric over time — revenue, pipeline, MRR, stock price, traffic. This dataset includes a seasonal dip in summer and a strong Q4 holiday spike to demonstrate trend visualization.

Used by: CRM, ERP, Finance, SaaS, Operations — every app type

Loading…

chart {
  type 'line'
  labelField 'Month'
  series {
    series {
      field 'Revenue'
      label 'Monthly Revenue ($)'
      borderColor '#4e79a7'
      backgroundColor 'rgba(78, 121, 167, 0.1)'
      tension 0.3
      borderWidth 2
      pointRadius 4
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Monthly Sales Trend' }
      legend { position 'bottom' }
    }
    scales {
      y { beginAtZero true; title { display true; text 'Revenue ($)' } }
      x { title { display true; text 'Month' } }
    }
  }
}

Bar Chart

A single metric compared across categories — the simplest bar chart users reach for. "Sales by region", "output by plant", "income by source". Clear differences between regions make the bar comparisons immediately meaningful.

Used by: CRM, ERP, Finance, SaaS — every app type

Loading…

chart {
  type 'bar'
  labelField 'Region'
  series {
    series {
      field 'Sales'
      label 'Total Sales ($)'
      backgroundColor 'rgba(78, 121, 167, 0.7)'
      borderColor '#4e79a7'
      borderWidth 1
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Sales by Region' }
      legend { display false }
    }
    scales {
      y { beginAtZero true; title { display true; text 'Sales ($)' } }
    }
  }
}

Grouped Bar Chart

P&L side-by-side in every ERP and finance dashboard. "Revenue vs Cost", "This Year vs Last Year", "Budget vs Actual" — always two bars per category so managers can compare at a glance. Revenue grows each quarter but expenses grow faster in Q3 (investment), then normalize — the visual gap tells the P&L story.

Used by: ERP, Finance, SaaS — any app comparing two metrics side-by-side

Loading…

chart {
  type 'bar'
  labelField 'Quarter'
  series {
    series {
      field 'Revenue'
      label 'Revenue'
      backgroundColor 'rgba(78, 121, 167, 0.7)'
      borderColor '#4e79a7'
      borderWidth 1
    }
    series {
      field 'Expenses'
      label 'Expenses'
      backgroundColor 'rgba(225, 87, 89, 0.7)'
      borderColor '#e15759'
      borderWidth 1
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Revenue vs Expenses by Quarter' }
      legend { position 'bottom' }
    }
    scales {
      y { beginAtZero true }
    }
  }
}

Pie Chart

"Where does the money go?" Every finance team, every budget review, every department head meeting. Pie is the go-to for showing proportions of a whole — expense categories, revenue sources, cost centers. Salaries dominate (as they do in reality), with clear visual wedge differences.

Used by: Finance, ERP, CRM, SaaS — any app showing proportions of a whole

Loading…

chart {
  type 'pie'
  labelField 'Category'
  series {
    series {
      field 'Amount'
      label 'Expenses'
      backgroundColor(['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f'])
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Expense Breakdown by Category' }
      legend { position 'right' }
    }
  }
}

Dual Y-Axis Mixed Chart

Executive KPI dashboard: Revenue ($, bars, left axis) + Profit Margin (%, line, right axis). CFOs and VPs of Sales always want to see the dollar amount alongside the percentage in one view. Revenue grows but margin compresses in Q3 (investment quarter), then recovers — the inverse relationship tells the story.

Used by: ERP, Finance, SaaS — executive dashboards correlating $ with %

Loading…

chart {
  type 'bar'
  labelField 'Quarter'
  series {
    series {
      field 'Revenue'
      label 'Revenue ($)'
      backgroundColor 'rgba(78, 121, 167, 0.7)'
      borderColor '#4e79a7'
      borderWidth 1
      yAxisID 'y'
      order 1
    }
    series {
      field 'ProfitMargin'
      label 'Profit Margin (%)'
      type 'line'
      borderColor '#e15759'
      backgroundColor 'rgba(225, 87, 89, 0.1)'
      borderWidth 3
      pointRadius 5
      pointStyle 'circle'
      tension 0.3
      fill false
      yAxisID 'y1'
      order 0
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Revenue & Profit Margin' }
    }
    scales {
      y {
        type 'linear'
        position 'left'
        beginAtZero true
        title { display true; text 'Revenue ($)' }
      }
      y1 {
        type 'linear'
        position 'right'
        beginAtZero true
        max 100
        title { display true; text 'Margin (%)' }
        grid { drawOnChartArea false }
      }
    }
  }
}

Stacked Bar Chart

"How much of Q3 revenue came from each product line?" Stacked bars show composition over time — extremely common in ERP product analytics, SaaS plan-level MRR breakdowns, and regional contribution reports. Software is the largest segment and growing, Services is stable, Support grows modestly.

Used by: ERP, SaaS, Finance — composition analysis over time periods

Loading…

chart {
  type 'bar'
  labelField 'Quarter'
  series {
    series {
      field 'Software'
      label 'Software'
      backgroundColor 'rgba(78, 121, 167, 0.8)'
    }
    series {
      field 'Services'
      label 'Professional Services'
      backgroundColor 'rgba(242, 142, 43, 0.8)'
    }
    series {
      field 'Support'
      label 'Support & Maintenance'
      backgroundColor 'rgba(89, 161, 79, 0.8)'
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Quarterly Revenue by Product Line' }
      legend { position 'bottom' }
      tooltip { mode 'index'; intersect false }
    }
    scales {
      x { stacked true }
      y { stacked true; beginAtZero true; title { display true; text 'Revenue ($)' } }
    }
  }
}

Doughnut Chart

Financial apps: investment portfolio split, fund allocation, asset class weights. Also used for market share, product revenue mix. Doughnut with cutout is the modern alternative to pie when you want to show a KPI or total in the center hole. Classic 60/40 portfolio skew — equities dominate, bonds buffer, alternatives are a small slice.

Used by: Finance, SaaS, CRM — portfolio views, market share, plan mix

Loading…

chart {
  type 'doughnut'
  labelField 'AssetClass'
  series {
    series {
      field 'Allocation'
      label 'Portfolio Weight (%)'
      backgroundColor(['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f'])
      borderWidth 2
    }
  }
  options {
    responsive true
    cutout '60%'
    plugins {
      title { display true; text 'Portfolio Allocation by Asset Class' }
      legend { position 'right' }
      tooltip { enabled true }
    }
  }
}

Area Chart

Financial planning: budget as a filled baseline area, actual as a dashed line overlay. January-March: under budget (good). April-May: over budget (warning). June-August: back on track. This pattern makes the overlay meaningful. Also used for sales target tracking, project spend monitoring, and forecast vs reality comparisons.

Used by: Finance, ERP, Operations — budget tracking, forecast vs actual

Loading…

chart {
  type 'line'
  labelField 'Month'
  series {
    series {
      field 'Budget'
      label 'Budget'
      borderColor '#4e79a7'
      backgroundColor 'rgba(78, 121, 167, 0.3)'
      fill 'origin'
      tension 0.4
      pointRadius 3
    }
    series {
      field 'Actual'
      label 'Actual Spending'
      borderColor '#e15759'
      borderDash([5, 5])
      borderWidth 2
      fill false
      pointRadius 4
      pointStyle 'circle'
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Budget vs Actual Spending' }
      legend { position 'bottom' }
    }
    scales {
      y { beginAtZero true; title { display true; text 'Amount ($)' } }
    }
  }
}

Horizontal Bar Chart

CRM ranking reports: "Top 10 Customers", "Top Products by Units Sold", "Sales Leaderboard by Rep". Horizontal bars are the natural choice for ranked lists where category labels (company names) are long. Sorted descending so the biggest customer is on top. Key: indexAxis 'y' in options flips the bar orientation.

Used by: CRM, ERP, SaaS — ranked lists, leaderboards, Pareto analysis

Loading…

chart {
  type 'bar'
  labelField 'Customer'
  series {
    series {
      field 'Revenue'
      label 'Revenue ($)'
      backgroundColor 'rgba(89, 161, 79, 0.7)'
      borderColor '#59a14f'
      borderWidth 1
    }
  }
  options {
    indexAxis 'y'
    responsive true
    plugins {
      title { display true; text 'Top 10 Customers by Revenue' }
      legend { display false }
    }
    scales {
      x { beginAtZero true; title { display true; text 'Revenue ($)' } }
    }
  }
}

Radar Chart

HR: comparing an employee's scores across 6-8 skill dimensions against the team average. This employee excels at Technical Skills and Problem Solving but falls below team average on Communication and Time Management — a realistic review profile. Also used for supplier evaluation scorecards and product feature comparison matrices.

Used by: HR, Operations, ERP — performance reviews, supplier scorecards

Loading…

chart {
  type 'radar'
  labelField 'Skill'
  series {
    series {
      field 'EmployeeScore'
      label 'Employee'
      borderColor '#4e79a7'
      backgroundColor 'rgba(78, 121, 167, 0.2)'
      pointRadius 4
      pointStyle 'rectRot'
    }
    series {
      field 'TeamAverage'
      label 'Team Average'
      borderColor '#e15759'
      backgroundColor 'rgba(225, 87, 89, 0.2)'
      pointRadius 4
      pointStyle 'circle'
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Performance Review: Skills Assessment' }
    }
    scales {
      r {
        beginAtZero true
        max 10
        ticks { stepSize 2 }
      }
    }
  }
}

Polar Area Chart

Customer success / quality teams: NPS or CSAT scores broken down by support channel (phone, email, chat, in-person). Each wedge's radius shows the score magnitude — useful when categories are not parts of a whole but each has an independent score. Live Chat scores highest, Social Media lowest — typical CSAT pattern where newer channels still lag traditional support.

Used by: CRM, SaaS — customer success teams, NPS/CSAT analysis

Loading…

chart {
  type 'polarArea'
  labelField 'Channel'
  series {
    series {
      field 'SatisfactionScore'
      label 'CSAT Score'
      backgroundColor(['rgba(78,121,167,0.6)', 'rgba(242,142,43,0.6)', 'rgba(225,87,89,0.6)', 'rgba(118,183,178,0.6)', 'rgba(89,161,79,0.6)'])
    }
  }
  options {
    responsive true
    plugins {
      title { display true; text 'Customer Satisfaction by Support Channel' }
      legend { position 'right' }
    }
    scales {
      r { beginAtZero true; max 100 }
    }
  }
}

How To Configure & Embed

First, configure your web components in ReportBurster — set up a report, define your data source, and customize the visualization under the Chart tab.

Then drop the <rb-chart> tag into any HTML page or framework component. Point it at your ReportBurster server and the web component handles data fetching and chart rendering automatically.

<rb-chart
  report-code="sales-trend"
  api-base-url="http://localhost:9090/api/jobman/reporting"
  style="height: 400px;">
</rb-chart>

Tip: Set a height on the component for consistent sizing.

Attributes

AttributeRequiredDescription
report-codeYesID of the report
api-base-urlYesBase URL for API calls

Chart rendering powered by Chart.js.

Data Tables (rb-tabulator)Pivot Tables (rb-pivot-table)