Skip to main content

Class: BarChart

Defined in: mobjects/graphing/BarChart.ts:90

BarChart - A bar chart visualization mobject

Creates a bar chart with customizable bars, axes, and labels. Supports both simple bar charts and grouped bar charts for comparing multiple series.

Example

// Simple bar chart
const chart = new BarChart({
values: [3, 7, 2, 5],
xLabels: ['A', 'B', 'C', 'D']
});

// Grouped bar chart comparing two series
const grouped = new BarChart({
values: [[3, 7, 2], [5, 4, 6]],
xLabels: ['Q1', 'Q2', 'Q3'],
seriesNames: ['2023', '2024'],
showLegend: true
});

// Animate value changes
chart.changeBarValues([5, 3, 8, 2]);

Extends

Constructors

Constructor

new BarChart(options): BarChart

Defined in: mobjects/graphing/BarChart.ts:124

Parameters

options

BarChartOptions

Returns

BarChart

Overrides

Group.constructor

Properties

__savedMobjectState

__savedMobjectState: unknown = null

Defined in: core/Mobject.ts:95

JSON-serializable saved state (used by restoreState()).

Inherited from

Group.__savedMobjectState


_axisColor

protected _axisColor: string

Defined in: mobjects/graphing/BarChart.ts:115


_barColors

protected _barColors: string[]

Defined in: mobjects/graphing/BarChart.ts:108


_barFillOpacity

protected _barFillOpacity: number

Defined in: mobjects/graphing/BarChart.ts:109


_barGap

protected _barGap: number

Defined in: mobjects/graphing/BarChart.ts:106


_barStrokeWidth

protected _barStrokeWidth: number

Defined in: mobjects/graphing/BarChart.ts:110


_barWidth

protected _barWidth: number

Defined in: mobjects/graphing/BarChart.ts:105


_color

protected _color: string = '#ffffff'

Defined in: core/Mobject.ts:70

Inherited from

Group._color


_dirty

_dirty: boolean = true

Defined in: core/Mobject.ts:88

Inherited from

Group._dirty


_disableChildZLayering

protected _disableChildZLayering: boolean = false

Defined in: core/Mobject.ts:85

When true, children skip the 2D z-layering offset in _syncToThree.

Inherited from

Group._disableChildZLayering


_groupGap

protected _groupGap: number

Defined in: mobjects/graphing/BarChart.ts:107


_height

protected _height: number

Defined in: mobjects/graphing/BarChart.ts:113


_includeYLabels

protected _includeYLabels: boolean

Defined in: mobjects/graphing/BarChart.ts:117


_includeYTicks

protected _includeYTicks: boolean

Defined in: mobjects/graphing/BarChart.ts:116


_opacity

protected _opacity: number = 1

Defined in: core/Mobject.ts:81

Inherited from

Group._opacity


_seriesNames

protected _seriesNames: string[]

Defined in: mobjects/graphing/BarChart.ts:120


_showLegend

protected _showLegend: boolean

Defined in: mobjects/graphing/BarChart.ts:121


_style

protected _style: MobjectStyle

Defined in: core/Mobject.ts:86

Inherited from

Group._style


_threeObject

_threeObject: Object3D<Object3DEventMap> = null

Defined in: core/Mobject.ts:87

Inherited from

Group._threeObject


_values

protected _values: number[][]

Defined in: mobjects/graphing/BarChart.ts:104


_width

protected _width: number

Defined in: mobjects/graphing/BarChart.ts:114


_xLabelFontSize

protected _xLabelFontSize: number

Defined in: mobjects/graphing/BarChart.ts:118


_xLabelTexts

protected _xLabelTexts: string[]

Defined in: mobjects/graphing/BarChart.ts:111


_yLabelFontSize

protected _yLabelFontSize: number

Defined in: mobjects/graphing/BarChart.ts:119


_yRange

protected _yRange: [number, number, number]

Defined in: mobjects/graphing/BarChart.ts:112


bars

bars: VGroup

Defined in: mobjects/graphing/BarChart.ts:92

The rectangular bars


children

children: Mobject[] = []

Defined in: core/Mobject.ts:65

Inherited from

Group.children


createdAtBeginning

createdAtBeginning: boolean = false

Defined in: core/Mobject.ts:69

Inherited from

Group.createdAtBeginning


fillOpacity

fillOpacity: number = 0

Defined in: core/Mobject.ts:83

Inherited from

Group.fillOpacity


id

readonly id: string

Defined in: core/Mobject.ts:63

Inherited from

Group.id


legend

legend: VGroup = null

Defined in: mobjects/graphing/BarChart.ts:102

Legend (if enabled)


parent

parent: Mobject = null

Defined in: core/Mobject.ts:64

Inherited from

Group.parent


position

position: Vector3

Defined in: core/Mobject.ts:66

Inherited from

Group.position


rotation

rotation: Euler

Defined in: core/Mobject.ts:67

Inherited from

Group.rotation


savedState

savedState: Mobject = null

Defined in: core/Mobject.ts:91

Saved mobject copy (used by Restore animation). Set by saveState().

Inherited from

Group.savedState


scaleVector

scaleVector: Vector3

Defined in: core/Mobject.ts:68

Inherited from

Group.scaleVector


strokeWidth

strokeWidth: number = 4

Defined in: core/Mobject.ts:82

Inherited from

Group.strokeWidth


targetCopy

targetCopy: Mobject = null

Defined in: core/Mobject.ts:93

Target copy used by generateTarget() / MoveToTarget animation.

Inherited from

Group.targetCopy


xAxisLine

xAxisLine: VMobject

Defined in: mobjects/graphing/BarChart.ts:96

X-axis line


xLabels

xLabels: VGroup

Defined in: mobjects/graphing/BarChart.ts:98

X-axis labels


yAxis

yAxis: NumberLine

Defined in: mobjects/graphing/BarChart.ts:94

The y-axis (left side)


yLabels

yLabels: VGroup

Defined in: mobjects/graphing/BarChart.ts:100

Y-axis labels

Accessors

animate

Get Signature

get animate(): any

Defined in: core/Mobject.ts:497

Returns an AnimateProxy that records method calls. Pass the proxy to scene.play() to animate from the current state to the state after all recorded calls are applied.

Example
scene.play(circle.animate.shift([2, 0, 0]));
scene.play(circle.animate.setColor('#ff0000').scale(2));
Returns

any

Inherited from

Group.animate


color

Get Signature

get color(): string

Defined in: core/Mobject.ts:71

Returns

string

Set Signature

set color(value): void

Defined in: core/Mobject.ts:74

Parameters
value

string

Returns

void

Inherited from

Group.color


fillColor

Get Signature

get fillColor(): string

Defined in: core/Mobject.ts:184

Returns

string

Set Signature

set fillColor(color): void

Defined in: core/Mobject.ts:188

Parameters
color

string

Returns

void

Inherited from

Group.fillColor


isDirty

Get Signature

get isDirty(): boolean

Defined in: core/Mobject.ts:551

Returns

boolean

Inherited from

Group.isDirty


length

Get Signature

get length(): number

Defined in: core/Group.ts:268

Get the number of mobjects in this group.

Returns

number

Inherited from

Group.length


opacity

Get Signature

get opacity(): number

Defined in: core/Mobject.ts:114

Returns

number

Set Signature

set opacity(value): void

Defined in: core/Mobject.ts:118

Parameters
value

number

Returns

void

Inherited from

Group.opacity


strokeColor

Get Signature

get strokeColor(): string

Defined in: core/Mobject.ts:195

Returns

string

Set Signature

set strokeColor(color): void

Defined in: core/Mobject.ts:199

Parameters
color

string

Returns

void

Inherited from

Group.strokeColor


style

Get Signature

get style(): MobjectStyle

Defined in: core/Mobject.ts:122

Returns

MobjectStyle

Inherited from

Group.style


submobjects

Get Signature

get submobjects(): Mobject[]

Defined in: core/Mobject.ts:136

Returns

Mobject[]

Inherited from

Group.submobjects

Methods

_createCopy()

protected _createCopy(): BarChart

Defined in: mobjects/graphing/BarChart.ts:651

Create a copy of this BarChart

Returns

BarChart

Overrides

Group._createCopy


_createThreeObject()

protected _createThreeObject(): Object3D

Defined in: core/Group.ts:238

Create the Three.js backing object for this Group. A group is simply a THREE.Group that contains children.

Returns

Object3D

Inherited from

Group._createThreeObject


_getBoundingBox()

_getBoundingBox(): object

Defined in: core/Mobject.ts:449

Returns

object

depth

depth: number

height

height: number

width

width: number

Deprecated

Use getBoundingBox() instead.

Inherited from

Group._getBoundingBox


_getEdgeInDirection()

_getEdgeInDirection(direction): Vector3Tuple

Defined in: core/Mobject.ts:442

Parameters

direction

Vector3Tuple

Returns

Vector3Tuple

Inherited from

Group._getEdgeInDirection


_markDirty()

_markDirty(): void

Defined in: core/Mobject.ts:541

Returns

void

Inherited from

Group._markDirty


_markDirtyUpward()

_markDirtyUpward(): void

Defined in: core/Mobject.ts:545

Returns

void

Inherited from

Group._markDirtyUpward


_syncMaterialToThree()

protected _syncMaterialToThree(): void

Defined in: core/Mobject.ts:539

Returns

void

Inherited from

Group._syncMaterialToThree


_syncToThree()

_syncToThree(): void

Defined in: core/Mobject.ts:519

Returns

void

Inherited from

Group._syncToThree


[iterator]()

[iterator](): Iterator<Mobject>

Defined in: core/Group.ts:284

Iterate over all mobjects in the group.

Returns

Iterator<Mobject>

Inherited from

Group.[iterator]


add()

add(mobject): this

Defined in: core/Group.ts:31

Add a mobject to this group.

Parameters

mobject

Mobject

Mobject to add

Returns

this

this for chaining

Inherited from

Group.add


addUpdater()

addUpdater(updater, callOnAdd): this

Defined in: core/Mobject.ts:589

Parameters

updater

UpdaterFunction

callOnAdd

boolean = false

Returns

this

Inherited from

Group.addUpdater


alignTo()

alignTo(target, direction): this

Defined in: core/Mobject.ts:427

Parameters

target

Mobject | Vector3Tuple

direction

Vector3Tuple

Returns

this

Inherited from

Group.alignTo


applyFunction()

applyFunction(fn, options?): this

Defined in: core/Mobject.ts:619

Parameters

fn

(point) => number[]

options?
aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

Group.applyFunction


applyMatrix()

applyMatrix(matrix, options?): this

Defined in: core/Mobject.ts:627

Parameters

matrix

number[][]

options?
aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

Group.applyMatrix


applyToFamily()

applyToFamily(func): this

Defined in: core/Mobject.ts:577

Parameters

func

(mobject) => void

Returns

this

Inherited from

Group.applyToFamily


become()

become(other): this

Defined in: core/Mobject.ts:376

Parameters

other

Mobject

Returns

this

Inherited from

Group.become


center()

center(): this

Defined in: core/Mobject.ts:479

Returns

this

Inherited from

Group.center


changeBarValues()

changeBarValues(newValues): VGroup

Defined in: mobjects/graphing/BarChart.ts:495

Change bar values with animation support

This method updates the bar heights to reflect new values. For animations, use this with a Transform animation.

Parameters

newValues

New values for the bars

number[] | number[][]

Returns

VGroup

The bars VGroup with updated heights (useful for animations)

Example

// Direct update
chart.changeBarValues([5, 3, 8, 2]);

// With animation (using scene.play)
const newChart = chart.copy();
newChart.changeBarValues([5, 3, 8, 2]);
scene.play(new Transform(chart, newChart));

clear()

clear(): this

Defined in: core/Group.ts:73

Remove all children from this group.

Returns

this

this for chaining

Inherited from

Group.clear


clearUpdaters()

clearUpdaters(): this

Defined in: core/Mobject.ts:601

Returns

this

Inherited from

Group.clearUpdaters


copy()

copy(): Mobject

Defined in: core/Mobject.ts:358

Returns

Mobject

Inherited from

Group.copy


dispose()

dispose(): void

Defined in: core/Mobject.ts:658

Returns

void

Inherited from

Group.dispose


filter()

filter(fn): Group

Defined in: core/Group.ts:312

Filter mobjects in the group.

Parameters

fn

(mobject, index) => boolean

Filter predicate

Returns

Group

New Group with filtered mobjects

Inherited from

Group.filter


flip()

flip(axis, options?): this

Defined in: core/Mobject.ts:257

Parameters

axis

Vector3Tuple = ...

options?
aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

Group.flip


forEach()

forEach(fn): this

Defined in: core/Group.ts:293

Apply a function to each mobject in the group.

Parameters

fn

(mobject, index) => void

Function to apply

Returns

this

this for chaining

Inherited from

Group.forEach


generateTarget()

generateTarget(): Mobject

Defined in: core/Mobject.ts:642

Returns

Mobject

Inherited from

Group.generateTarget


get()

get(index): Mobject

Defined in: core/Group.ts:277

Get a mobject by index.

Parameters

index

number

Index of the mobject

Returns

Mobject

The mobject at the given index, or undefined

Inherited from

Group.get


getBar()

getBar(groupIndex, seriesIndex): Rectangle

Defined in: mobjects/graphing/BarChart.ts:557

Get a specific bar by group and series index

Parameters

groupIndex

number

The group/category index

seriesIndex

number = 0

The series index (default 0 for single series)

Returns

Rectangle

The Rectangle bar, or undefined if not found


getBottom()

getBottom(): Vector3Tuple

Defined in: core/Mobject.ts:458

Returns

Vector3Tuple

Inherited from

Group.getBottom


getBoundingBox()

getBoundingBox(): object

Defined in: core/Mobject.ts:445

Returns

object

depth

depth: number

height

height: number

width

width: number

Inherited from

Group.getBoundingBox


getBounds()

getBounds(): object

Defined in: core/Mobject.ts:392

Returns

object

max

max: object

max.x

x: number

max.y

y: number

max.z

z: number

min

min: object

min.x

x: number

min.y

y: number

min.z

z: number

Inherited from

Group.getBounds


getCenter()

getCenter(): Vector3Tuple

Defined in: core/Group.ts:86

Get the center of the group (average of all children centers). Children maintain world-space coordinates, so no group position offset is added (shift/moveTo only update children, not group position).

Returns

Vector3Tuple

Center position as [x, y, z]

Inherited from

Group.getCenter


getDisplayMeshes()

getDisplayMeshes(): Mesh<BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>, Material<MaterialEventMap> | Material<MaterialEventMap>[], Object3DEventMap>[]

Defined in: core/Group.ts:253

Returns

Mesh<BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>, Material<MaterialEventMap> | Material<MaterialEventMap>[], Object3DEventMap>[]

Inherited from

Group.getDisplayMeshes


getDisplayMeshLength()

getDisplayMeshLength(): number

Defined in: core/Group.ts:249

Number of visible display meshes this mobject contributes when rendered. Used for Transform eligibility checks without forcing Three.js object creation.

Returns

number

Inherited from

Group.getDisplayMeshLength


getEdge()

getEdge(direction): Vector3Tuple

Defined in: core/Mobject.ts:452

Parameters

direction

Vector3Tuple

Returns

Vector3Tuple

Inherited from

Group.getEdge


getFamily()

getFamily(): Mobject[]

Defined in: core/Mobject.ts:583

Returns

Mobject[]

Inherited from

Group.getFamily


getHeight()

getHeight(): number

Defined in: mobjects/graphing/BarChart.ts:581

Get the height of the chart area

Returns

number


getLeft()

getLeft(): Vector3Tuple

Defined in: core/Mobject.ts:461

Returns

Vector3Tuple

Inherited from

Group.getLeft


getNumGroups()

getNumGroups(): number

Defined in: mobjects/graphing/BarChart.ts:602

Get the number of bar groups

Returns

number


getNumSeries()

getNumSeries(): number

Defined in: mobjects/graphing/BarChart.ts:609

Get the number of series

Returns

number


getRight()

getRight(): Vector3Tuple

Defined in: core/Mobject.ts:464

Returns

Vector3Tuple

Inherited from

Group.getRight


getSeriesBars()

getSeriesBars(seriesIndex): VGroup

Defined in: mobjects/graphing/BarChart.ts:567

Get all bars for a specific series

Parameters

seriesIndex

number

The series index

Returns

VGroup

VGroup containing the bars for that series


getThreeObject()

getThreeObject(): Object3D

Defined in: core/Mobject.ts:555

Returns

Object3D

Inherited from

Group.getThreeObject


getTop()

getTop(): Vector3Tuple

Defined in: core/Mobject.ts:455

Returns

Vector3Tuple

Inherited from

Group.getTop


getUpdaters()

getUpdaters(): UpdaterFunction[]

Defined in: core/Mobject.ts:608

Returns

UpdaterFunction[]

Inherited from

Group.getUpdaters


getValues()

getValues(): number[][]

Defined in: mobjects/graphing/BarChart.ts:461

Get the current values

Returns

number[][]


getValuesFlat()

getValuesFlat(): number[]

Defined in: mobjects/graphing/BarChart.ts:468

Get a flat array of values (for single series charts)

Returns

number[]


getWidth()

getWidth(): number

Defined in: mobjects/graphing/BarChart.ts:588

Get the width of the chart area

Returns

number


getYRange()

getYRange(): [number, number, number]

Defined in: mobjects/graphing/BarChart.ts:595

Get the y-axis range

Returns

[number, number, number]


hasUpdaters()

hasUpdaters(): boolean

Defined in: core/Mobject.ts:605

Returns

boolean

Inherited from

Group.hasUpdaters


map()

map<T>(fn): T[]

Defined in: core/Group.ts:303

Map over all mobjects in the group.

Type Parameters

T

T

Parameters

fn

(mobject, index) => T

Mapping function

Returns

T[]

Array of mapped values

Inherited from

Group.map


moveTo()

moveTo(target, alignedEdge?): this

Defined in: core/Group.ts:127

Move the group center to the given point, or align with another Mobject.

Parameters

target

Target position [x, y, z] or Mobject to align with

Mobject | Vector3Tuple

alignedEdge?

Vector3Tuple

Optional edge direction to align (e.g., UL aligns upper-left edges)

Returns

this

this for chaining

Inherited from

Group.moveTo


moveToAligned()

moveToAligned(target, alignedEdge?): this

Defined in: core/Mobject.ts:437

Parameters

target

Mobject | Vector3Tuple

alignedEdge?

Vector3Tuple

Returns

this

Inherited from

Group.moveToAligned


nextTo()

nextTo(target, direction, buff): this

Defined in: core/Mobject.ts:410

Parameters

target

Mobject | Vector3Tuple

direction

Vector3Tuple = RIGHT

buff

number = 0.25

Returns

this

Inherited from

Group.nextTo


prepareForNonlinearTransform()

prepareForNonlinearTransform(numPieces): this

Defined in: core/Mobject.ts:635

Parameters

numPieces

number = 50

Returns

this

Inherited from

Group.prepareForNonlinearTransform


remove()

remove(mobject): this

Defined in: core/Group.ts:56

Remove a mobject from this group.

Parameters

mobject

Mobject

Mobject to remove

Returns

this

this for chaining

Inherited from

Group.remove


removeUpdater()

removeUpdater(updater): this

Defined in: core/Mobject.ts:595

Parameters

updater

UpdaterFunction

Returns

this

Inherited from

Group.removeUpdater


replace()

replace(target, stretch): this

Defined in: core/Mobject.ts:381

Parameters

target

Mobject

stretch

boolean = false

Returns

this

Inherited from

Group.replace


restoreState()

restoreState(): boolean

Defined in: core/Mobject.ts:652

Returns

boolean

Inherited from

Group.restoreState


rotate()

rotate(angle, axisOrOptions?): this

Defined in: core/Group.ts:157

Rotate all children around an axis. Only children are rotated to avoid double-counting with Three.js hierarchy.

Parameters

angle

number

Rotation angle in radians

axisOrOptions?

Vector3Tuple | { aboutPoint?: Vector3Tuple; axis?: Vector3Tuple; }

Returns

this

this for chaining

Inherited from

Group.rotate


rotateAboutOrigin()

rotateAboutOrigin(angle, axis): this

Defined in: core/Mobject.ts:253

Parameters

angle

number

axis

Vector3Tuple = ...

Returns

this

Inherited from

Group.rotateAboutOrigin


saveState()

saveState(): this

Defined in: core/Mobject.ts:647

Returns

this

Inherited from

Group.saveState


scale()

scale(factor): this

Defined in: core/Group.ts:174

Scale all children. Only children are scaled to avoid double-counting with Three.js hierarchy.

Parameters

factor

Scale factor (number for uniform, tuple for non-uniform)

number | Vector3Tuple

Returns

this

this for chaining

Inherited from

Group.scale


setBarColors()

setBarColors(colors): this

Defined in: mobjects/graphing/BarChart.ts:618

Set bar colors

Parameters

colors

New colors (single color or array)

string | string[]

Returns

this

this for chaining


setBarFillOpacity()

setBarFillOpacity(opacity): this

Defined in: mobjects/graphing/BarChart.ts:642

Set bar fill opacity

Parameters

opacity

number

Fill opacity (0-1)

Returns

this

this for chaining


setColor()

setColor(color): this

Defined in: core/Group.ts:187

Set the color of all children.

Parameters

color

string

CSS color string

Returns

this

this for chaining

Inherited from

Group.setColor


setFill()

setFill(color?, opacity?): this

Defined in: core/Mobject.ts:178

Parameters

color?

string

opacity?

number

Returns

this

Inherited from

Group.setFill


setFillOpacity()

setFillOpacity(opacity): this

Defined in: core/Group.ts:226

Set the fill opacity of all children.

Parameters

opacity

number

Fill opacity (0-1)

Returns

this

this for chaining

Inherited from

Group.setFillOpacity


setStrokeOpacity()

setStrokeOpacity(opacity): this

Defined in: core/Group.ts:200

Set the stroke opacity of all children.

Parameters

opacity

number

Opacity value (0-1)

Returns

this

this for chaining

Inherited from

Group.setStrokeOpacity


setStrokeWidth()

setStrokeWidth(width): this

Defined in: core/Group.ts:213

Set the stroke width of all children.

Parameters

width

number

Stroke width in pixels

Returns

this

this for chaining

Inherited from

Group.setStrokeWidth


setStyle()

setStyle(style): this

Defined in: core/Mobject.ts:126

Parameters

style

Partial<MobjectStyle>

Returns

this

Inherited from

Group.setStyle


setX()

setX(x): this

Defined in: core/Mobject.ts:467

Parameters

x

number

Returns

this

Inherited from

Group.setX


setY()

setY(y): this

Defined in: core/Mobject.ts:471

Parameters

y

number

Returns

this

Inherited from

Group.setY


setZ()

setZ(z): this

Defined in: core/Mobject.ts:475

Parameters

z

number

Returns

this

Inherited from

Group.setZ


shift()

shift(delta): this

Defined in: core/Group.ts:113

Shift all children by the given delta. Only children are shifted (they maintain world-space coordinates). The group's own position is NOT updated to avoid double-counting when getCenter() computes the average of children centers.

Parameters

delta

Vector3Tuple

Translation vector [x, y, z]

Returns

this

this for chaining

Inherited from

Group.shift


stretch()

stretch(factor, dim, options?): this

Defined in: core/Mobject.ts:310

Parameters

factor

number

dim

number

options?
aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

Group.stretch


toCorner()

toCorner(direction, buff, frameDimensions?): this

Defined in: core/Mobject.ts:509

Parameters

direction

Vector3Tuple = ...

buff

number = 0.5

frameDimensions?

[number, number]

Returns

this

Inherited from

Group.toCorner


toEdge()

toEdge(direction, buff, frameDimensions?): this

Defined in: core/Mobject.ts:504

Parameters

direction

Vector3Tuple

buff

number = 0.5

frameDimensions?

[number, number]

Returns

this

Inherited from

Group.toEdge


update()

update(dt): void

Defined in: core/Mobject.ts:612

Parameters

dt

number

Returns

void

Inherited from

Group.update