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


Custom CSS in Vitara Charts

In Vitara Charts if you use custom CSS styles no presentational attributes (like fill, stroke, font styles etc.) are applied to the chart SVG. Instead, the design is applied purely by CSS.

To customize your styles you need to add your own individual CSS rules in the customStyles.css file.

The location of the customStyles.css file is,

tomcat/webapps/MicroStrategy/plugins/VitaraCharts/custom

The following is an overview of the CSS rules which are internally set on the VitaraCharts.

CSS Rules


.vitara-chart-background

The chart area background. Use this to set the chart area background fills.

 

.vitara-plot-background

The plot area background. Use this to set the plot area background fills.

 

.vitara-category-axis

Class for the category axis. Use this to set the category axis labels text style.

 

.vitara-value-axis

Class for the value axis. Use this to set the value axis labels' text style.

 

.vitara-axis-title

The axis title. Use this to set the axis title text style. Use this class in conjunction with the category or value axis to specifically set the title of that particular axis. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing.

 

.vitara-axis-line

The axis line. Use this to set the width and color of the axis line. Use this class in conjunction with the category or value axis to specifically set the axis line properties of that particular axis.

 

.vitara-line-display

The line series. Use this to set the default line style in any line series. Use this class in conjunction with the chart's class name to specifically set the line properties of that particular chart. Line properties like stroke-dasharray, stroke and stroke-width can be set.

 

.vitara-grid-line

The grid line. Use this to set the grid line properties. Line properties like stroke-dasharray, stroke and stroke-width can be set.

 

.vitara-legend-text

The legend item text. Use this to set the legend item text style. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing.

 

.vitara-marker

Can change the fills and strokes and sizes of markers on VitaraCharts selected from the Marker tab in the property editor.

 

.vitara-datalabel

The datalabel. Use this to change the text style of datalabels. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing.

 

.vitara-point

  • The default class for any data element on the chart.
  • For example, in bar chart a bar is a data element and in a bubble chart a bubble is a data element.
  • Use this to change the text style of datalabels. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing.

 

CSS Class Names of charts

Chart Name Class Name
Vitara Bar Chart .VitaraHCBarChart
Vitara Stacked Bar Chart .VitaraHCStackedBarChart
Vitara Column Chart .VitaraHCColumnChart
Vitara Stacked Column Chart .VitaraHCStackedColumnChart
Vitara Pie Chart .VitaraHCPieChart
Vitara KPI Ring Chart .VitaraHCKPIRingChart
Vitara Line Chart .VitaraHCLineChart
Vitara Area Chart .VitaraHCAreaChart
Vitara Bubble Chart .VitaraHCBubbleChart
Vitara Tornado Chart .VitaraHCTornadoChart
Vitara Sparkline Chart .VitaraHCSparklineChart
Vitara Heatmap Chart .VitaraHCHeatmapChart
Vitara Funnel Chart .VitaraHCFunnelChart
Vitara Column Range Chart .VitaraHCColumnRangeChart
Vitara Bullet Chart .VitaraHCBulletChart
Vitara Waterfall Chart .VitaraHCWaterfallChart
Vitara KPI Animation Chart .VitaraKPIAnimationChart
Vitara Calendar Heatmap .VitaraD3CalHeatMapChart
Vitara Simple KPI Chart .VitaraSimpleKPIChart
Vitara Mekko Chart .VitaraMekkoChart
Vitara Word Cloud .VitaraHCWordCloud
Vitara Waffle Chart .VitaraD3WaffleChart
Vitara Histogram Chart .VitaraHistogramChart
Vitara Dumbbell Chart .VitaraHCDumbbellChart
Vitara Slope Chart .VitaraHCSlopeChart
Vitara Circle Packing Chart .VitaraD3CirclePackingChart
Vitara Angular Gauge Chart .VitaraHCAngularGaugeChart
Vitara Sankey Chart .VitaraHCSankeyChart

View sample implementations