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:82

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:57

Inherited from​

Group._color

_dirty​

_dirty: boolean = true

Defined in: core/Mobject.ts:75

Inherited from​

Group._dirty

_disableChildZLayering​

protected _disableChildZLayering: boolean = false

Defined in: core/Mobject.ts:72

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:68

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:73

Inherited from​

Group._style

_threeObject​

_threeObject: Object3D<Object3DEventMap> = null

Defined in: core/Mobject.ts:74

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:52

Inherited from​

Group.children

createdAtBeginning​

createdAtBeginning: boolean = false

Defined in: core/Mobject.ts:56

Inherited from​

Group.createdAtBeginning

fillOpacity​

fillOpacity: number = 0

Defined in: core/Mobject.ts:70

Inherited from​

Group.fillOpacity

id​

readonly id: string

Defined in: core/Mobject.ts:50

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:51

Inherited from​

Group.parent

position​

position: Vector3

Defined in: core/Mobject.ts:53

Inherited from​

Group.position

rotation​

rotation: Euler

Defined in: core/Mobject.ts:54

Inherited from​

Group.rotation

savedState​

savedState: Mobject = null

Defined in: core/Mobject.ts:78

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

Inherited from​

Group.savedState

scaleVector​

scaleVector: Vector3

Defined in: core/Mobject.ts:55

Inherited from​

Group.scaleVector

strokeWidth​

strokeWidth: number = 4

Defined in: core/Mobject.ts:69

Inherited from​

Group.strokeWidth

targetCopy​

targetCopy: Mobject = null

Defined in: core/Mobject.ts:80

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​

color​

Get Signature​

get color(): string

Defined in: core/Mobject.ts:58

Returns​

string

Set Signature​

set color(value): void

Defined in: core/Mobject.ts:61

Parameters​
value​

string

Returns​

void

Inherited from​

Group.color

fillColor​

Get Signature​

get fillColor(): string

Defined in: core/Mobject.ts:171

Returns​

string

Set Signature​

set fillColor(color): void

Defined in: core/Mobject.ts:175

Parameters​
color​

string

Returns​

void

Inherited from​

Group.fillColor

isDirty​

Get Signature​

get isDirty(): boolean

Defined in: core/Mobject.ts:448

Returns​

boolean

Inherited from​

Group.isDirty

length​

Get Signature​

get length(): number

Defined in: core/Group.ts:260

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:101

Returns​

number

Set Signature​

set opacity(value): void

Defined in: core/Mobject.ts:105

Parameters​
value​

number

Returns​

void

Inherited from​

Group.opacity

style​

Get Signature​

get style(): MobjectStyle

Defined in: core/Mobject.ts:109

Returns​

MobjectStyle

Inherited from​

Group.style

submobjects​

Get Signature​

get submobjects(): Mobject[]

Defined in: core/Mobject.ts:123

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:367

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:360

Parameters​

direction​

Vector3Tuple

Returns​

Vector3Tuple

Inherited from​

Group._getEdgeInDirection

_markDirty()​

_markDirty(): void

Defined in: core/Mobject.ts:438

Returns​

void

Inherited from​

Group._markDirty

_markDirtyUpward()​

_markDirtyUpward(): void

Defined in: core/Mobject.ts:442

Returns​

void

Inherited from​

Group._markDirtyUpward

_syncMaterialToThree()​

protected _syncMaterialToThree(): void

Defined in: core/Mobject.ts:436

Returns​

void

Inherited from​

Group._syncMaterialToThree

_syncToThree()​

_syncToThree(): void

Defined in: core/Mobject.ts:416

Returns​

void

Inherited from​

Group._syncToThree

[iterator]()​

[iterator](): Iterator<Mobject>

Defined in: core/Group.ts:276

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:474

Parameters​

updater​

UpdaterFunction

callOnAdd​

boolean = false

Returns​

this

Inherited from​

Group.addUpdater

alignTo()​

alignTo(target, direction): this

Defined in: core/Mobject.ts:345

Parameters​

target​

Mobject | Vector3Tuple

direction​

Vector3Tuple

Returns​

this

Inherited from​

Group.alignTo

applyFunction()​

applyFunction(fn): this

Defined in: core/Mobject.ts:504

Parameters​

fn​

(point) => number[]

Returns​

this

Inherited from​

Group.applyFunction

applyToFamily()​

applyToFamily(func): this

Defined in: core/Mobject.ts:462

Parameters​

func​

(mobject) => void

Returns​

this

Inherited from​

Group.applyToFamily

become()​

become(other): this

Defined in: core/Mobject.ts:294

Parameters​

other​

Mobject

Returns​

this

Inherited from​

Group.become

center()​

center(): this

Defined in: core/Mobject.ts:397

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:486

Returns​

this

Inherited from​

Group.clearUpdaters

copy()​

copy(): Mobject

Defined in: core/Mobject.ts:276

Returns​

Mobject

Inherited from​

Group.copy

dispose()​

dispose(): void

Defined in: core/Mobject.ts:532

Returns​

void

Inherited from​

Group.dispose

filter()​

filter(fn): Group

Defined in: core/Group.ts:304

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): this

Defined in: core/Mobject.ts:225

Parameters​

axis​

Vector3Tuple = ...

Returns​

this

Inherited from​

Group.flip

forEach()​

forEach(fn): this

Defined in: core/Group.ts:285

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:516

Returns​

Mobject

Inherited from​

Group.generateTarget

get()​

get(index): Mobject

Defined in: core/Group.ts:269

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:376

Returns​

Vector3Tuple

Inherited from​

Group.getBottom

getBoundingBox()​

getBoundingBox(): object

Defined in: core/Mobject.ts:363

Returns​

object

depth​

depth: number

height​

height: number

width​

width: number

Inherited from​

Group.getBoundingBox

getBounds()​

getBounds(): object

Defined in: core/Mobject.ts:310

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

getEdge()​

getEdge(direction): Vector3Tuple

Defined in: core/Mobject.ts:370

Parameters​

direction​

Vector3Tuple

Returns​

Vector3Tuple

Inherited from​

Group.getEdge

getFamily()​

getFamily(): Mobject[]

Defined in: core/Mobject.ts:468

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:379

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:382

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:452

Returns​

Object3D

Inherited from​

Group.getThreeObject

getTop()​

getTop(): Vector3Tuple

Defined in: core/Mobject.ts:373

Returns​

Vector3Tuple

Inherited from​

Group.getTop

getUpdaters()​

getUpdaters(): UpdaterFunction[]

Defined in: core/Mobject.ts:493

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:490

Returns​

boolean

Inherited from​

Group.hasUpdaters

map()​

map<T>(fn): T[]

Defined in: core/Group.ts:295

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:355

Parameters​

target​

Mobject | Vector3Tuple

alignedEdge?​

Vector3Tuple

Returns​

this

Inherited from​

Group.moveToAligned

nextTo()​

nextTo(target, direction, buff): this

Defined in: core/Mobject.ts:328

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:509

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:480

Parameters​

updater​

UpdaterFunction

Returns​

this

Inherited from​

Group.removeUpdater

replace()​

replace(target, stretch): this

Defined in: core/Mobject.ts:299

Parameters​

target​

Mobject

stretch​

boolean = false

Returns​

this

Inherited from​

Group.replace

restoreState()​

restoreState(): boolean

Defined in: core/Mobject.ts:526

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:221

Parameters​

angle​

number

axis​

Vector3Tuple = ...

Returns​

this

Inherited from​

Group.rotateAboutOrigin

saveState()​

saveState(): this

Defined in: core/Mobject.ts:521

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:165

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

setOpacity()​

setOpacity(opacity): this

Defined in: core/Group.ts:200

Set the opacity of all children.

Parameters​

opacity​

number

Opacity value (0-1)

Returns​

this

this for chaining

Inherited from​

Group.setOpacity

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:113

Parameters​

style​

Partial<MobjectStyle>

Returns​

this

Inherited from​

Group.setStyle

setX()​

setX(x): this

Defined in: core/Mobject.ts:385

Parameters​

x​

number

Returns​

this

Inherited from​

Group.setX

setY()​

setY(y): this

Defined in: core/Mobject.ts:389

Parameters​

y​

number

Returns​

this

Inherited from​

Group.setY

setZ()​

setZ(z): this

Defined in: core/Mobject.ts:393

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

toCorner()​

toCorner(direction, buff, frameDimensions?): this

Defined in: core/Mobject.ts:406

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:401

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:497

Parameters​

dt​

number

Returns​

void

Inherited from​

Group.update