LogoLogo
  • CHARTS USER GUIDE
    • Introduction
    • Angular Gauge Chart
    • Bar/Column Chart
    • Bubble Chart
    • Bullet Chart
    • Calendar Heatmap Chart
    • Column Range Chart
    • Combination Chart
    • Dumbbell Chart
    • Filter Chart
    • Funnel Chart
    • Grid Chart
    • Table heatmap
    • Histogram Chart
    • KPI Animation Chart
    • KPI Ring Chart
    • Line/Area line Chart
    • Mekko Chart
    • Packed Bubble Chart
    • Pie Chart
    • Polar Charts
    • Sankey Chart
    • Simple KPI Chart
    • Slope Chart
    • Sparkline Chart
    • Stacked Column/Bar
    • Text Node
    • Tornado Chart
    • Trellis Chart
    • Variwide Chart
    • Waffle Chart
    • Waterfall Chart
    • Wordcloud Chart
    • Workstation
    • Allow/Block URLs
    • Animation Duration
    • Attribute Forms
    • Auto Scroll
    • Axes
    • Background Images
    • Backward Compatibility
    • Bar/Column Width
    • Color Picker with Opacity
    • Connect Null Points
    • Custom Markers
    • Custom SVG Markers
    • Data Markers
    • Data label customization
    • Dossiers/Documents differences
    • Drilling
    • Error Bars
    • Export to PDF
      • Export engine local resource set up
    • Formatting metric data
    • Gradient Threshold
    • Legend
    • Negative Sign
    • Pattern Fill
    • Play Animation
    • Plot lines/Reference lines
    • Reset color property
    • Reset font properties
    • Right Click Menu
    • Right-to-left Support
    • Series using Attribute
    • Small Multiples
    • Smooth Line
    • Tooltip Customization
    • Tooltip Links
  • GRID/MICROCHART GUIDE
    • Appearance
    • Auto Size
    • Column Totals
    • Context Menu
    • Creating a micro chart
    • Custom markers
    • Custom Editor
    • Filter Data
    • Format/Clear Format
    • Grand Total
    • Pivoting and Row Grouping
    • Horizontal Bars/Pins
    • Embed Images
    • Manage Scaling Grouping
    • Manage Column Grouping
    • Manage Metric Grouping
    • Pin Column
    • Reorder columns
    • Reset Columns
    • Show/Hide Column
    • Sorting
    • Subtotals
    • Thresholds
    • Tooltip
    • Transparency
    • Trend Lines
    • Value Aggregation
    • Variance
  • MAPS USER GUIDE
    • Creating New Maps
    • Custom Layouts
    • Customization of the Map chart
    • Default Maps
    • Formatting Options
    • Generic Merge tool
    • US map using counties data
    • US Map using ZIP Codes
  • IBCS USER GUIDE
    • IBCS
      • Why IBCS
      • Mapping IBCS Scenarios
      • Negative Metrics
      • Scaling Multiple Charts
    • CERTIFIED CHARTS
      • Multi-tier Bar chart
      • Multi-tier Column chart
      • Small Multiples
      • Vertical Waterfall
  • CUSTOMIZATION GUIDE
    • Introduction
    • Custom CSS
    • Custom CSS Samples
    • Custom Color Palette
    • Custom Fonts
    • Condensed Metric Format
    • Disable Edit button
    • Grid Custom CSS
    • Localization
  • FAQ
    • Contact Us
    • FAQS
  • INSTALL DOCS
    • Installing on MicroStrategy Web
    • Installing on MicroStrategy Desktop/Workstation
    • Installing on MicroStrategy Library
    • Installing on MicroStrategy Mobile
    • Release Notes
    • Release Notes Maps
Powered by GitBook
On this page
  • Chart Area Background
  • Plot Area Background
  • Axes Labels and Data Labels
  • Tooltip
  • Category Axis with title style different from the label style
  • Border around bars/columns with border styling
  • Line Chart with different line style set
  • Legend Styling
  • Customising Markers
  • Customising Grid lines
  • Applied stroke to be black , opacity to be 0.2, stroke-dasharray to be 6,6
  • Customising a property specific to one or more charts

Was this helpful?

  1. CUSTOMIZATION GUIDE

Custom CSS Samples

These features are supported in the release 4.2 (or newer)

PreviousCustom CSSNextCustom Color Palette

Last updated 7 months ago

Was this helpful?

Chart Area Background

Applied chart area background color to be rgb(117, 245, 66)

.vitara-chart-background{
  fill: rgb(117, 245, 66);
  background-color: rgb(117, 245, 66)
}

Plot Area Background

Applied plot area background color to be #f5ad42

.vitara-plot-background{
    fill: #f5ad42;
    background-color: #f5ad42
}

Axes Labels and Data Labels

Applied the ChartArea background color to be rgb(117, 245, 66)

The PlotArea background color to be #f5ad42

Both Category and Value axes labels font-size to be 15px, color fill to be red , font-family to be Impact and font-style to be italic

For datalabels, the font-size to be 25px, color fill to be green and font-family to be Courier New

.vitara-chart-background{
    fill: rgb(117, 245, 66);
    background-color: rgb(117, 245, 66)

}

.vitara-plot-background{
    fill: #f5ad42;
    background-color: #f5ad42
}

.vitara-category-axis, .vitara-value-axis {
    font-size: 15px;
    fill: red;
    font-family: Impact;
    font-style: italic;
}

.vitara-datalabel{
    font-size: 25px;
    color: green;
    font-family: 'Courier New';
}

Tooltip

Applied the background color to be aqua , font family to be Comic Sans MS, Comic Sans, cursive and font size to be 35px

.vitara-tooltip{
    font-family: "Comic Sans MS, Comic Sans", cursive;
    font-size: 35px;
    background-color: aqua;
}

Category Axis with title style different from the label style

For labels, the color fill was rgb(197, 66, 245), the font family was Impact, the text decoration was underline, and the font size was 18px. The color fill for the title was #f56c42, the font family was Helvetica, the text decoration was underline, the font size was 25px, and the font style was italic.

.vitara-category-axis{
    fill: rgb(197, 66, 245);
    text-decoration: underline;
    font-family: Impact;
    font-size: 18px
}
.vitara-category-axis .vitara-axis-title{
fill: #f56c42;
text-decoration: underline;
font-style: italic;
font-family: Helvetica;
font-size: 25px
}

Border around bars/columns with border styling

Applied border to the column, stroke-width to be 2, stroke to be red and stroke-dasharray to be 5,5

.vitara-point{
    stroke-width: 2;
    stroke: red !important;
    stroke-dasharray: 5,5;
}

Line Chart with different line style set

Applied stroke-width to be 2 and the stroke-dasharray to be 4,5,2

.vitara-line-display{
    stroke-width: 2;
    stroke-dasharray: 4,5,2;
}

Legend Styling

Applied font-size to be 20px, the font-family to be Impact and fill to be red

.vitara-legend-text{
    fill: red;
    font-family: Impact;
    font-size: 20px;
}

Customising Markers

Applied font-size to be 14px, fill to be teal , stroke to be red , stroke-width to be 2

.vitara-marker{
	fill:teal;
	font-size: 14px;
	stroke:red;
	stroke-width: 2;
}

Customising Grid lines

Applied stroke to be black , opacity to be 0.2, stroke-dasharray to be 6,6

.vitara-grid-line{
    stroke: black;
    opacity: 0.2;
    stroke-dasharray: 6,6;
}

Customising a property specific to one or more charts

Applied fill to be palegreen for Pie chart background color

.VitaraHCPieChart .vitara-chart-background{
	fill: palegreen;
}