Mixed Chart

Combine multiple chart types (line, bar, area) in a single visualization for powerful multi-dimensional data analysis.

Loading chart...

Installation

npm

npx @galaxy-stack/nebula-cli@latest add mixed-chart

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add mixed-chart

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add mixed-chart

bun

bunx @galaxy-stack/nebula-cli@latest add mixed-chart

Dependencies

This component automatically installs the following dependencies:

• Vue: vue-echarts@^7.0.3, echarts@^5.5.1
• React: echarts-for-react@^3.0.2, echarts@^5.5.1
• Angular: ngx-echarts@^18.0.0, echarts@^5.5.1
• React Native: @wuba/react-native-echarts@^3.0.1, echarts@^5.5.1, @shopify/react-native-skia@^1.6.4
• Flutter: fl_chart@^0.68.0

Features

• 📊 Multiple Chart Types - Combine line, bar, and area charts in one visualization
• 🎨 Per-Dataset Styling - Each dataset can have its own chart type and colors
• 📈 Advanced Analysis - Compare different metrics with appropriate visualizations
• 📱 Responsive - Adapts to all screen sizes seamlessly
• 🌓 Dark Mode - Built-in dark theme support
• ⚡ Performance - Optimized rendering even with multiple datasets

Use Cases

• Business Dashboards - Compare revenue, sales, and profit in one view
• Analytics - Visualize multiple KPIs with appropriate chart types
• Financial Reports - Mix actual vs. forecast with different visualizations
• Performance Monitoring - Track multiple metrics over time
• Multi-Metric Analysis - Combine related data points with suitable chart types

API Reference

Props

Prop	Type	Default	Description
data	ChartData	required	Chart data with labels and datasets
height	number	300	Chart height in pixels
width	number | string	"100%"	Chart width
theme	"light" | "dark"	"light"	Color theme
legend	boolean	true	Show/hide legend
legendPosition	"top" | "bottom" | "left" | "right"	"top"	Legend position
grid	boolean | GridConfig	true	Show/hide grid lines or custom grid config
tooltip	boolean | TooltipConfig	true	Enable/disable tooltip or custom config
animation	boolean	true	Enable/disable animations
loading	boolean	false	Show loading state
emptyText	string	"No data available"	Text shown when no data

ChartData Interface

interface ChartData {
  labels: string[]
  datasets: ChartDataset[]
}

interface ChartDataset {
  label: string
  data: number[]
  type?: 'line' | 'bar' | 'area'  // Specify chart type per dataset
  color?: string
  smooth?: boolean  // For line/area charts
}

Examples

Line + Bar Combination

Compare trends with exact values:

Vue

<script setup lang="ts">
const data = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [
    {
      label: 'Target',
      data: [100, 120, 140, 160],
      type: 'line',
      color: '#8b5cf6',
    },
    {
      label: 'Actual',
      data: [90, 130, 135, 155],
      type: 'bar',
      color: '#10b981',
    },
  ],
}
</script>

<template>
  <MixedChart :data="data" />
</template>

React

const data = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [
    {
      label: 'Target',
      data: [100, 120, 140, 160],
      type: 'line',
      color: '#8b5cf6',
    },
    {
      label: 'Actual',
      data: [90, 130, 135, 155],
      type: 'bar',
      color: '#10b981',
    },
  ],
}

<MixedChart data={data} />

Multiple Lines + Area

Show ranges with trends:

Vue

<script setup lang="ts">
const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    {
      label: 'Users',
      data: [1200, 1900, 1500, 2100, 1800],
      type: 'line',
      color: '#3b82f6',
    },
    {
      label: 'Sessions',
      data: [2000, 2800, 2200, 3100, 2700],
      type: 'line',
      color: '#10b981',
    },
    {
      label: 'Bandwidth',
      data: [800, 1200, 900, 1500, 1100],
      type: 'area',
      color: '#f59e0b',
    },
  ],
}
</script>

<template>
  <MixedChart :data="data" :height="400" />
</template>

React

const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    {
      label: 'Users',
      data: [1200, 1900, 1500, 2100, 1800],
      type: 'line',
      color: '#3b82f6',
    },
    {
      label: 'Sessions',
      data: [2000, 2800, 2200, 3100, 2700],
      type: 'line',
      color: '#10b981',
    },
    {
      label: 'Bandwidth',
      data: [800, 1200, 900, 1500, 1100],
      type: 'area',
      color: '#f59e0b',
    },
  ],
}

<MixedChart data={data} height={400} />

Dark Theme

Vue

<MixedChart :data="data" theme="dark" />

React

<MixedChart data={data} theme="dark" />

Legend Position

Vue

<MixedChart :data="data" legendPosition="bottom" />

React

<MixedChart data={data} legendPosition="bottom" />

Tips

• Consistent Scales: Ensure all datasets use comparable value ranges
• Type Selection: Use lines for trends, bars for comparisons, areas for volumes
• Color Contrast: Choose distinct colors for each dataset
• Legend Clarity: Position legend for easy reference without blocking data
• Dataset Order: Place most important data in front (last in array)

Related Components

• Line Chart - For pure line visualizations
• Bar Chart - For categorical comparisons
• Area Chart - For filled area visualizations