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

Custom CSS Samples

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)
}
Chart Area Background

 

Plot Area Background

Applied plot area background color to be #f5ad42

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

 

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';
}
Axes Labels and Data Labels

 

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;
}
Tooltip

 

Category Axis with title style different from the label style

For labels, applied the color fill to be rgb(197, 66, 245) , font family to be Impact, text decoration to be underline and font size to be 18px

For title, applied the color fill to be #f56c42 , font family to be Helvetica, text decoration to be underline, font size to be 25px and font style to be 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
}
Category Axis Styling

 

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;
}
Bar/Column Border

 

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;
}
Line Styling

 

Styling Lines

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

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

 

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;
}
Legend Styling

 

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;
}
Marker Stylings

 

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;
}
Grid line Stylings

 

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;
}
Chart specific Stylings