Skip to content

funbars.md

Latest commit

 

History

History
429 lines (344 loc) · 16.4 KB

funbars.md

File metadata and controls

429 lines (344 loc) · 16.4 KB

FunBars Visual for Power BI

Visual and this doc create with Copilot for github.

A creative, highly customizable column chart visual for Microsoft Power BI that transforms ordinary bar charts into visually striking data presentations with image backgrounds, patterns, gradients, and the signature Power BI logo-style overlapping bars.

FunBars Visual

What is FunBars?

FunBars is a custom column chart visual that goes beyond standard bar charts by offering extensive styling options. Whether you need professional business charts with subtle gradients or playful presentations with image backgrounds and patterns, FunBars delivers the flexibility to create charts that match your vision.

Key visual effects include:

  • Image Backgrounds - Fill bars with images (packages, money, buildings, textures, and more)
  • Gradient Fills - Apply beautiful color gradients with multiple presets
  • Pattern Overlays - Add stripes, dots, crosshatch, and other patterns
  • Rounded Corners - Soften bar edges for a modern look
  • Overlapping Bars - Create the iconic Power BI logo-style stacked effect
  • Per-Bar Gradients - Unique gradient colors for each bar

FunBars Visual in Power BI

FunBars Visual in Power BI

FunBars Visual in Power BI

FunBars Visual in Power BI

Key Benefits

🎨 Creative Expression

Transform data presentations from mundane to memorable. Perfect for marketing dashboards, executive summaries, infographics, and any report where visual impact matters.

📊 Power BI Logo Style

Recreate the iconic Power BI logo look with overlapping bars and per-bar gradients. Great for branding materials, training presentations, and Power BI community content.

🖼️ Image Backgrounds

Fill bars with contextual images that reinforce your message. Show sales with money images, shipping with packages, or corporate data with building imagery.

🌈 Gradient Presets

Choose from 12 beautiful gradient presets including Ocean Blue, Sunset, Forest, Fire, Purple Dream, and more—or create your own custom gradients.

✨ Pattern Effects

Add visual texture with 8 pattern types: diagonal stripes, horizontal stripes, vertical stripes, dots, crosshatch, grid, zigzag, and waves.

♿ Accessibility Features

  • Full keyboard navigation support
  • High-contrast mode compatibility
  • Screen reader friendly with ARIA attributes
  • Multi-language localization

🎯 Enterprise Ready

  • Microsoft Fluent 2 Design System compliance
  • Theme color palette integration
  • Conditional formatting support
  • Landing page with setup instructions

Data Fields

Field Required Description
Category ✅ Yes Category names displayed on the X-axis
Values ✅ Yes Numeric measure determining bar heights
Tooltips Optional Additional measures to display in tooltips

How to Use

Step 1: Add the Visual to Your Report

  1. In Power BI Desktop, go to the Visualizations pane
  2. Click the ... (more options) button
  3. Select Import a visual from a file
  4. Browse to the .pbiviz file and click Open
  5. The FunBars icon will appear in your visualizations pane

Step 2: Prepare Your Data

Your data should be in a table format with at minimum:

  • A column for category names
  • A column for numeric values

Step 3: Add Data to the Visual

  1. Click the FunBars visual to select it
  2. Drag your fields to the appropriate data wells:
    • Category: Your category name column
    • Values: Your numeric measure column
    • Tooltips: Additional measures for tooltip display (optional)

Step 4: Customize Appearance

  1. With the visual selected, click the Format pane (paint roller icon)
  2. Expand the formatting cards to customize your chart

Step 5: Interact with the Chart

  • Click a bar to select it and cross-filter other visuals
  • Ctrl+Click to select multiple bars
  • Right-click for context menu options
  • Use Tab/Arrow keys for keyboard navigation

Example: Sales by Region

Sample Data

Region Sales
North 120000
South 95000
East 150000
West 88000
Central 110000

Step-by-Step: Create a Gradient Bar Chart

  1. Add the FunBars visual to your report canvas
  2. Configure the data fields:
    • Drag Region to the Category field
    • Drag Sales to the Values field
  3. Enable gradient fills:
    • In Format pane, expand Color
    • Turn on Use gradient
    • Select a preset like "🌊 Ocean Blue" or "🌅 Sunset"
  4. Add rounded corners:
    • Expand Rounded Corners
    • Turn on Enable rounded corners
    • Set Corner radius to 15
    • Enable Top corners only
  5. Observe the results:
    • Bars display with smooth gradient transitions
    • Corners are softened for a modern appearance

Step-by-Step: Create Power BI Logo Style Bars

  1. Start with the gradient bar chart from above
  2. Enable overlapping:
    • Expand Layout
    • Turn on Enable bar overlap
    • Set Overlap amount to 40%
    • Set Overlap direction to "Right"
  3. Enable per-bar gradients:
    • Expand Color
    • Turn on Power BI logo colors OR
    • Turn on Unique gradient per bar for custom colors
  4. Observe the results:
    • Bars overlap like the Power BI logo
    • Each bar has a unique gradient color

Step-by-Step: Create Image Background Bars

  1. Add the FunBars visual to your report canvas
  2. Configure the data as before
  3. Enable image backgrounds:
    • Expand Image Background
    • Turn on Enable Image Background
    • Select an Image Preset like "💰 Money" or "📦 Packages"
  4. Add matching border:
    • Expand Border
    • Turn on Show border
    • Enable Auto-match to image preset for coordinated colors
  5. Adjust transparency (optional):
    • Set Image opacity to 80% for subtle effect
  6. Observe the results:
    • Bars are filled with thematic images
    • Border color matches the image theme

Example: Monthly Performance

Sample Data

Month Revenue Target
Jan 45000 50000
Feb 52000 50000
Mar 48000 55000
Apr 61000 55000
May 58000 60000
Jun 72000 60000

Step-by-Step: Create a Pattern Overlay Chart

  1. Add the FunBars visual and configure data
  2. Set base color:
    • Expand Color
    • Set Fill color to a brand color
  3. Enable patterns:
    • Expand Pattern
    • Turn on Enable Pattern
    • Select Pattern Type like "Diagonal Stripes"
    • Set Pattern color to white (#FFFFFF)
    • Set Pattern opacity to 30%
    • Adjust Pattern size to 8
  4. Enable data labels:
    • Expand Data Labels
    • Turn on Show data labels
    • Set Position to "Outside End"
  5. Observe the results:
    • Bars have subtle striped texture
    • Values are displayed above each bar

Formatting Options Reference

Color

Setting Description Default
Use theme colors Auto-assign colors from Power BI theme Off
Fill color Bar fill color #0F6CBD
Use gradient Enable gradient fills Off
Gradient preset Pre-defined gradient combinations Ocean Blue
Start color Custom gradient start color #0F6CBD
End color Custom gradient end color #5EB3F0
Gradient direction Vertical, Horizontal, Diagonal, or Radial Vertical
Unique gradient per bar Different gradient for each bar Off
Power BI logo colors Use official Power BI brand colors Off
Opacity Bar transparency (0-100%) 100%

Border

Setting Description Default
Show border Display bar border Off
Color Border color #333333
Width Border thickness (0-10 px) 2
Auto-match to image preset Match border to image theme On

Rounded Corners

Setting Description Default
Enable rounded corners Apply rounded corners to bars Off
Corner radius Radius in pixels (0-50 px) 10
Top corners only Round only top corners On

Image Background

Setting Description Default
Enable Image Background Fill bars with images Off
Image Preset Pre-defined images (Packages, Money, Charts, etc.) None
Custom image URL, base64 data URI, or SVG data URI (supports conditional formatting) (empty)
Image fit Non-tile (single image) or Tile (repeating pattern) Non-tile
Image placement Position of image: Center, Top, Bottom, Left, Right, Top left, Top right, Bottom left, Bottom right Center
Image opacity Image transparency (0-100%) 100%
Image scale (%) Size of image details (25-400%). Lower = larger details, Higher = smaller details 100%

Custom Image Formats:

  • Image URL: https://example.com/image.png
  • Base64 PNG/JPG: data:image/png;base64,iVBORw0KGgo...
  • SVG data URI: data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">...</svg>
  • SVG URL-encoded: data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3C/svg%3E

Custom Image Examples (Galaxy theme):

SVG Data URI:

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%230a0a1a"/><stop offset="50%" style="stop-color:%231a1a3a"/><stop offset="100%" style="stop-color:%23050510"/></linearGradient><radialGradient id="n1" cx="30%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%23ff69b4" stop-opacity="0.4"/><stop offset="100%" style="stop-color:%234b0082" stop-opacity="0"/></radialGradient></defs><rect fill="url(%23bg)" width="200" height="200"/><rect fill="url(%23n1)" width="200" height="200"/><circle cx="35" cy="25" r="2" fill="%23fff"/><circle cx="165" cy="45" r="1.5" fill="%23fff" opacity="0.9"/><circle cx="90" cy="80" r="1" fill="%23fff" opacity="0.7"/><circle cx="150" cy="120" r="1.5" fill="%23fff" opacity="0.8"/><circle cx="50" cy="150" r="1" fill="%23fff" opacity="0.6"/></svg>

Base64 (simple starfield):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABhklEQVR4nO3csQ3CQBAF0T2JAqiIJiiAHumBxijBEYmJnNgS0v3ZTPJ+dIE1q5W8awEAAAAAAODfLMo+9fStehqt+hqr+lofvdYAx5WeQpK4c0SyJO6ckKyIO0ckS+LOOckW4s4pyRbizinJFuLOKckW4s4pyRbizinJFuLOKckW4s4Nydq4c0OyNu7ckKyNOzckW4g7NyRbiDs3JGuIO1ckW4g7VyRbiDtXJGuIO1ckW4g7VyRbiDtXJFuIO1ckW4g7VyRrqPdaSLaQ7lUh2UK6V4VkC+leFZItpHtVSLaQ7nUg2Un6zD7tywvJTsQ7nSQ7Ee90kuwk4p1Okp1EvNNJspOIdzpJdhLxTifJTiLe6STZScQ7nSQ7iXink2QnEe90kuwk4p1Okp1EvNNJspOIdzpJdhLxTifJTiLe6STZScQ7nSQ7iXink2QnEe90kuwk4p1Okp1EvNNJspOIdzpJdtI5yZ7xTifJTure6aTeu9NJvXen0/8AAAAAAID/8gYxDXJ/BhXSSQAAAABJRU5ErkJggg==

Available Image Presets:

  • 📦 Packages (tile)
  • 💰 Money
  • 🏢 Buildings
  • ⚙️ Gears
  • 🔗 Network
  • 🎉 Confetti (tile)
  • 🔷 Geometric (tile)
  • 🌊 Waves
  • ⭕ Circles (tile)
  • 🔺 Triangles (tile)
  • ⭐ Stars (tile)
  • 🌃 Starry Night
  • 🌌 Galaxy
  • ❤️ Hearts (tile)
  • ☁️ Clouds
  • 🌿 Nature
  • 🎨 Abstract (tile)
  • 🪵 Wood Texture (tile)
  • 🪨 Marble (tile)
  • 🧵 Grid (tile)

Pattern

Setting Description Default
Enable Pattern Apply pattern overlay Off
Pattern Type Diagonal/Horizontal/Vertical Stripes, Dots, etc. Diagonal Stripes
Pattern color Pattern line/dot color #FFFFFF
Pattern size Size of pattern elements (2-50 px) 10
Pattern opacity Pattern transparency (0-100%) 50%

Available Pattern Types:

  • Diagonal Stripes
  • Horizontal Stripes
  • Vertical Stripes
  • Dots
  • Crosshatch
  • Grid
  • Zigzag
  • Waves

Layout

Setting Description Default
Reverse Order Reverse category order Off
Sort by Value Sort bars by value Off
Sort Descending Sort high to low (when sorting by value) On
Space between bars Gap between bars (0-80%) 20%
Bar width (%) Relative bar width (20-100%) 100%
Enable bar overlap Create overlapping bars effect Off
Overlap amount (%) How much bars overlap (0-70%) 30%
Overlap direction Left or Right Right

X-axis

Setting Description Default
Show X-axis Display X-axis On
Show axis line Display axis line Off
Show axis label Display axis title Off
Axis label Custom title text (field name)
Color Text color #424242
Font Font family, size, bold, italic, underline Segoe UI, 12pt

Y-axis

Setting Description Default
Show Y-axis Display Y-axis On
Show axis line Display axis line Off
Show axis label Display axis title Off
Axis label Custom title text (field name)
Color Text color #424242
Font Font family, size, bold, italic, underline Segoe UI, 12pt
Show gridlines Display horizontal gridlines On
Gridline color Gridline color #E0E0E0

Data Labels

Setting Description Default
Show data labels Display values on bars Off
Color Label text color #242424
Font Font family, size, bold, italic, underline Segoe UI, 12pt
Position Inside End, Outside End, or Center Outside End
Display units Auto, None, Thousands, Millions, Billions Auto
Decimal places Number of decimal places (0-5) 0

Tips and Best Practices

Visual Design

  • Use gradients sparingly for professional reports
  • Image backgrounds work best for infographics and marketing materials
  • Patterns at low opacity (20-40%) add texture without overwhelming
  • Rounded corners give a modern, friendly appearance

Performance

  • Image backgrounds may slightly impact rendering performance
  • Use built-in presets instead of custom URLs when possible
  • Large datasets (1000+ bars) render best with simple styling

Accessibility

  • Ensure sufficient contrast between bar colors and backgrounds
  • Use data labels for precise value communication
  • Test with high-contrast mode enabled
  • Avoid relying solely on color to convey meaning

Combining Effects

  • Gradient + Pattern: Use low pattern opacity (20-30%)
  • Image + Border: Enable auto-match for coordinated colors
  • Overlap + Gradient: Use per-bar gradients for best effect
  • Rounded corners work with all fill types

Version History

Version 1.0.2.0

High Contrast Mode Enhancements:

  • Patterns: Patterns now work in high contrast mode using the HC foreground color at 100% opacity
  • Preset Images: All 20 preset images now have high contrast versions using only HC foreground/background colors (simplified line art versions)
  • Custom Images: Custom image URLs are skipped in HC mode (no accessible alternative available)
  • Borders: Borders always use HC foreground color regardless of auto-match settings
  • Rounded Corners: Proper HC outline path ensures rounded corners are visible without borders enabled
  • Gridlines: Improved visibility with thicker lines (1.5px), larger dash pattern (5,5), and 70% opacity
  • Landing Page: Landing page uses HC colors when high contrast mode is active
  • Data Labels: Text uses HC foreground color
  • Axis Labels: X and Y axis text uses HC foreground color

Version 1.0.1.0

  • Removed Charts preset
  • Improved Packages preset with tileable scattered box pattern
  • Improved Abstract preset to be tileable
  • Renamed Fabric texture to Grid
  • Added "(tile)" indicator to preset names that tile well
  • Tileable presets: Packages, Confetti, Geometric, Circles, Triangles, Stars, Hearts, Abstract, Wood Texture, Marble, Grid

Version 1.0.0.0

  • Initial release
  • Image background support with 20 presets
  • Gradient fills with 12 presets
  • Pattern overlays with 8 types
  • Overlapping bars (Power BI logo style)
  • Per-bar unique gradients
  • Rounded corners
  • Full formatting pane customization
  • Keyboard navigation
  • High-contrast mode support
  • Landing page
  • Context menu support
  • Multi-language localization

Support

For issues, feature requests, or questions:

Acknowledgments

This visual and documentation were created with the assistance of GitHub Copilot.

License

MIT License - See LICENSE file for details.