Chart Styling

F8 uses ChartJS as the charting library and ChartJS uses canvas to draw the charts, styling of the charts cannot be done directly via CSS. Instead, CSS classes are read by the Chart component and converted to the appropriate javascript properties to be passed to the chart engine. As these classes are not discoverable, they are documented here.

Note: All of these classes and values are optional and must be specified in the Theme. If not specified, the default from ChartJS is used.

.chart-defaults

Used to specify default font and color styles for all of the labels, axes and titles

  .chart-defaults {
     color           // fontColor   Default font color for all text
     font-family     // fontFamily  Default font family for all text
     font-size       // fontSize    Default font size (in px) for text. Does not apply to radialLinear scale point labels
     font-style      // fontStyle   Default font style. Does not apply to tooltip title or footer. Does not apply to chart title      
  }

.chart-title

Used to specify chart title styles (ChartJS properties in Chart.defaults.global.title)

  .chart-title {
     color           // fontColor
     font-family     // fontFamily
     font-size       // fontSize (must be specified as 'px')
     font-style      // fontStyle
  }

.chart-legend

Used to specify chart legend styles (ChartJS properties in Chart.defaults.global.legend)

  .chart-legend {
     color           // labels.fontColor
     font-family     // labels.fontFamily
     font-size       // labels.fontSize (must be specified as 'px')
     font-style      // labels.fontStyle
     width           // labels.boxWidth (width of the colored box for each item in legend -  must be specified as 'px'))
     padding-top     // labels.padding (padding between rows of colored boxes -  must be specified as 'px'))
  }

.chart-axis

Used to specify chart axis styles (ChartJS properties for Scales - X axis and Y axis)

  .chart-axis {
     color           // ticks.fontColor
     font-family     // ticks.fontFamily
     font-size       // ticks.fontSize (must be specified as 'px')
     font-style      // ticks.fontStyle
     padding-top     // ticks.padding (padding between the tick label and the axis. Note: Only applicable to horizontal scales -  must be specified as 'px'))
  }

.chart-axis-title

Used to specify chart axis titles styles (overrides the .chart-axis styles for the axis titles)

  .chart-axis-title {
     color           // scaleLabel.fontColor
     font-family     // scaleLabel.fontFamily
     font-size       // scaleLabel.fontSize (must be specified as 'px')
     font-style      // scaleLabel.fontStyle
  }

.chart-line

Used to specify Line element styles (ChartJS properties in Chart.defaults.global.elements.line)

  .chart-line {
     border-width    // borderWidth (default line stroke width - must be specified as 'px')
  }

.chart-point

Used to specify Point element styles for line points (ChartJS properties in Chart.defaults.global.elements.point)

  .chart-point {
     width           // radius (must be specified as 'px')
     border-width    // borderWidth (must be specified as 'px')
  }

.chart-point:hover

Used to specify Point element styles for line points when hovering over point (ChartJS properties in Chart.defaults.global.elements.point)

  .chart-point:hover {
     width           // hoverRadius (must be specified as 'px')
     border-width    // hoverBorderWidth (must be specified as 'px')
  }

.chart-bar

Used to specify Bar element styles for line points (ChartJS properties in Chart.defaults.global.elements.rectangle)

  .chart-bar {
     border-width    // borderWidth (must be specified as 'px')
  }