RacingBars

• Name: Racing Bars

• Description: Built-in counter to display data from the first to the last value.

• Playground Example

params$

• Type: DeepPartial<RacingBarsParams>

• Fields:

  Name	Description	Type
  bar	Settings for the bars	Object
  barLabel	Settings for the label of the data	Object
  valueLabel	Settings for the value of the data	Object
  axisLabel	Settings for the X-axis label	Object
  rankingAmount	Number of items to display, default is 10. If set to 'auto', all data will be displayed if there is enough space	'auto' | number
  autorun	Auto-run state, default is stopped. Set to true to start running	boolean
  loop	Set to repeat the race	boolean

• params.bar

  Name	Description	Type
  barWidth	Width of each bar	number
  barPadding	Padding between bars	number
  barRadius	Radius of bar corners	number | boolean

• params.barLabel

  Name	Description	Type
  position	Position of the label	'inside' | 'outside' | 'none'
  padding	Padding	number
  colorType	Color type of the label	ColorType

• params.valueLabel

  Name	Description	Type
  padding	Padding	number
  colorType	Color type of the label	ColorType
  format	Function to format the label text	string | ((text: d3.NumberValue) => string | d3.NumberValue

• params.axisLabel

  Name	Description	Type
  offset	Position of the axis label	[number, number]
  colorType	Color type of the label	ColorType

Detailed Types

type ColorType = 'none' | 'label' | 'labelContrast' | 'primary' | 'secondary' | 'background'

• Default values:

{
  bar: {
    barWidth: number
    barPadding: number
    barRadius: number | boolean
  }
  barLabel: {
    position: 'inside' | 'outside' | 'none'
    padding: number
    rotate: number
    colorType: ColorType
  }
  valueLabel: {
    padding: number
    colorType: ColorType
    format: string | ((text: d3.NumberValue | null) => string | d3.NumberValue)
  }
  axisLabel: {
    offset: [number, number]
    colorType: ColorType
  }
  rankingAmount: 'auto' | number
  autorun: boolean
  loop: boolean
}