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.
.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
| 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 |