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
  • Custom fonts in Vitara Charts
  • Step 1:
  • Step 2:
  • Step 3:
  • Step 4:
  • Step 5:
  • Step 6:
  • Step 7:
  • Step 8:
  • Steps to show the custom fonts in the font-family dropdowns in property editor and set a particular font as default font.
  • Step 1:
  • Step 2:
  • Step 3 (Custom font by default across all charts):

Was this helpful?

  1. CUSTOMIZATION GUIDE

Custom Fonts

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

Custom fonts in Vitara Charts

Vitara Charts can display text, such as axes labels, data labels, or tooltips, in the text font styles specified by the customer. The processes for deploying custom fonts in Vitara charts are outlined below.

Step 1:

Copy the font file into the following path:

\tomcat\webapps\MicroStrategy\plugins\VitaraCharts\style\v430559\font

Step 2:

Open customStyles.css file, which will be in the following path

plugins\VitaraCharts\custom

Step 3:

Uncomment the “@font-face” container by deleting the text /** (in first line) and the text **/ (in the line number seven)

Step 4:

Delete the entire text in the second line: “Uncomment to introduce new font-family and make it available”.

Step 5:

Replace “font-family” with the name of the font you want to add. If your font name contains spaces, use quotation marks at the beginning and end of the name. For instance, ““Frutiger 45 Light.”

Step 6:

In src:url line copy the path of the folder in which we copied the font file.

In the below example Hokjesgeest font is deployed.

@font-face {
            font-family: Hokjesgeest;
            src: url(../style/v430559/font/Hokjesgeest.ttf);
           }

Another example which has spaces in the font name:

@font-face {
            font-family: "Frutiger 45 Light";
            src: url("../style/v430559/font/Frutiger 45 Light.ttf");
           }

Step 7:

If you want to add multiple custom fonts, then define font family for each custom font.

@font-face {
            font-family: fontello;
            src: url(../style/v430559/font/fontello.ttf);
           }

Step 8:

List all the custom fonts names in the font vitara-chart-container.

.vitara .vitara-chart-container
{
	font-family:Hokjesgeest, fontello, "Frutiger 45 Light", Arial, Helvetica,
	Verdana, sans-serif !important;
}

Below is the screenshot of the updated “customStyle.css” file.

Steps to show the custom fonts in the font-family dropdowns in property editor and set a particular font as default font.

Step 1:

Open the file named global.txt in the following path,

Tomcat 8.0\webapps\MicroStrategy\plugins\VitaraCharts\custom

In this file, you can find fields named font.customFonts and font.defaultFont

Step 2:

Include all the custom fonts specified in the font.customFonts key, each one separated by a comma (,). For example,

font.customFonts=OpenSans, Hokjesgeest, Frutiger 45 Light

Step 3 (Custom font by default across all charts):

To set a font as default font for all charts, set the font.defaultFont key. For example,

font.defaultFont=Hokjesgeest

or

font.defaultFont=Frutiger 45 Light

Refresh your web browser and open Vitara Charts. Below is the screenshot of the custom font in the Vitara chart.

PreviousCustom Color PaletteNextCondensed Metric Format

Last updated 7 months ago

Was this helpful?