Skip to main content

CSS

VisuallyJs assigns a number of CSS classes to charts, to enable you to easily establish your own themes.

Common chart classes​

ClassDescription
vjs-area-chartSet on the container element for an area chart
vjs-area-chart-areaAdded to the painted area element of an Area chart
vjs-bar-chartAdded to the container element in a bar chart
vjs-bar-chart-barAdded to each bar element in a bar chart
vjs-bubble-chartAdded to a bubble chart
vjs-bubble-chart-pointAdded to each point in a bubble chart
vjs-chart-axisAdded to both the X and Y axes in an XY chart
vjs-chart-axis-labelsAdded to the parent container for the label elements in both the X and Y axes of an XY chart
vjs-chart-axis-lineAdded to the baseline marking the X or Y axis in an XY chart
vjs-chart-axis-titleAdded to the title element in both the X and Y axes of an XY chart
vjs-chart-backgroundAdded to the background element of a chart.
vjs-chart-bodyAdded to the element that contains series data and crosshairs.
vjs-chart-crosshairAdded to the crosshairs element of a chart
vjs-chart-crosshair-labelAdded to the label of a value axis crosshair element
vjs-chart-emptyAdded to the "No data" message that is shown when a chart is empty.
vjs-chart-gridlineAdded to each gridline element in an XY chart
vjs-chart-gridlinesAdded to the parent SVG group of the gridlines in an XY chart
vjs-chart-legendAdded to a chart's legend element
vjs-chart-legend-dotAdded to the dots for each item in a legend
vjs-chart-legend-itemAdded to an item in a chart's legend
vjs-chart-legend-labelAdded to the label in a chart's legend
vjs-chart-plot-backgroundAdded to element that is the parent of the chart's plot(s).
vjs-chart-pointAdded to each point in a scatter/bubble chart
vjs-chart-point-hit-areaAdded to the hit area elements that represent each data point. These are to assist users in selecting data points which are small.
vjs-chart-axis-scale-labelAdded to the labels of a value axis in an XY chart
vjs-chart-seriesAdded to an SVG group element that represents a data series in an XY chart.
vjs-chart-subtitleAdded to the subtitle element of a chart
vjs-chart-titleAdded to the title element of a chart
vjs-chart-x-axisAdded to the X axis element in an XY chart
vjs-chart-x-axis-titleAdded to the X axis title element in an XY chart
vjs-chart-y-axisAdded to the Y axis element in an XY chart
vjs-chart-y-axis-titleAdded to the Y axis title element in an XY chart
vjs-column-chartAdded to the container element of a column chart
vjs-column-chart-columnAdded to each column element in a column chart
vjs-chart-crosshair-category-axisAdded to the category axis crosshair elements of a chart
vjs-chart-crosshair-value-axisAdded to the value axis crosshair elements of a chart
vjs-line-chartSet on the container element for a line chart
vjs-pie-chartCSS class set on a pie chart.
vjs-pie-sliceCSS class set on a slice in a pie chart.
vjs-pie-slice-selectedCSS class set on a selected slice in a pie chart.
vjs-scatter-chartAdded to a scatter chart
vjs-scatter-chart-pointAdded to each point in a scatter chart
vjs-tooltipAdded to a chart tooltip's main element

Area Charts​

ClassDescription
vjs-area-chartSet on the container element for an area chart
vjs-area-chart-areaAdded to the painted area element of an Area chart

Bar Charts​

ClassDescription
vjs-bar-chartAdded to the container element in a bar chart
vjs-bar-chart-barAdded to each bar element in a bar chart

Bubble Charts​

ClassDescription
vjs-bubble-chart-pointAdded to each point in a bubble chart
vjs-chart-pointAdded to each point in a scatter/bubble chart
vjs-chart-point-hit-areaAdded to the hit area elements that represent each data point. These are to assist users in selecting data points which are small.

Column Charts​

ClassDescription
vjs-column-chartAdded to the container element of a column chart
vjs-column-chart-columnAdded to each column element in a column chart

Gauge Charts​

ClassDescription
vjs-gauge-chartAssigned to the container for a gauge chart
vjs-gauge-labelAssigned to each label element in a GaugeChart.
vjs-gauge-needleAssigned to the needle element in a GaugeChart.
vjs-gauge-needle-pivotAssigned to the needle pivot element in a GaugeChart.
vjs-gauge-tickAssigned to each tick element in a GaugeChart.
vjs-gauge-trackAssigned to the track element in a GaugeChart.
vjs-gauge-zoneAssigned to each zone element in a GaugeChart.

Line Charts​

ClassDescription
vjs-line-chartSet on the container element for a line chart

Pie Charts​

ClassDescription
vjs-pie-chartCSS class set on a pie chart.
vjs-pie-sliceCSS class set on a slice in a pie chart.
vjs-pie-slice-selectedCSS class set on a selected slice in a pie chart.

Sankey Charts​

ClassDescription
vjs-sankeyAssigned to the sankey chart container
vjs-sankey-edgeAssigned to edges in Sankey chart
vjs-sankey-labelAssigned to labels in a sankey chart
vjs-sankey-nodeAssigned to nodes in a sankey chart
vjs-sankey-selectedAssigned to edges/nodes in Sankey chart when the edge/node forms part of the selected path.
vjs-sankey-unselectedAssigned to edges/nodes in Sankey chart when something is selected but this edge/node is not in the selected path

Scatter Charts​

ClassDescription
vjs-bubble-chartAdded to a bubble chart
vjs-chart-pointAdded to each point in a scatter/bubble chart
vjs-chart-point-hit-areaAdded to the hit area elements that represent each data point. These are to assist users in selecting data points which are small.
vjs-scatter-chartAdded to a scatter chart
vjs-scatter-chart-pointAdded to each point in a scatter chart