Skip to main content

Class: BarChart

Hierarchy

Constructors

constructor

new BarChart(query, data, options?, responsiveOptions?)

This method creates a new bar chart and returns API object that you can use for later changes.

Example

// Create a simple bar chart
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[5, 2, 4, 2, 0]
]
};

// In the global name space Chartist we call the Bar function to initialize a bar chart. As a first parameter we pass in a selector where we would like to get our chart created and as a second parameter we pass our data object.
new BarChart('.ct-chart', data);

Example

// This example creates a bipolar grouped bar chart where the boundaries are limitted to -10 and 10
new BarChart('.ct-chart', {
labels: [1, 2, 3, 4, 5, 6, 7],
series: [
[1, 3, 2, -5, -3, 1, -6],
[-5, -2, -4, -1, 2, -3, 1]
]
}, {
seriesBarDistance: 12,
low: -10,
high: 10
});

Parameters

NameTypeDescription
querynull | string | ElementA selector query string or directly a DOM element
dataBarChartDataThe data object that needs to consist of a labels and a series array
options?BarChartOptions<AxisOptions, AxisOptions>The options object with options that override the default options. Check the examples for a detailed list.
responsiveOptions?ResponsiveOptions<BarChartOptions<AxisOptions, AxisOptions>>Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]

Overrides

BaseChart.constructor

Defined in

charts/BarChart/BarChart.ts:188

Properties

data

Protected data: BarChartData

Inherited from

BaseChart.data

Defined in

charts/BarChart/BarChart.ts:190


svg

Protected Optional svg: Svg

Inherited from

BaseChart.svg

Defined in

charts/BaseChart.ts:11


container

Protected Readonly container: Element

Inherited from

BaseChart.container

Defined in

charts/BaseChart.ts:12


eventEmitter

Protected Readonly eventEmitter: EventEmitter

Inherited from

BaseChart.eventEmitter

Defined in

charts/BaseChart.ts:13

Methods

createChart

createChart(options): void

Creates a new chart

Parameters

NameType
optionsBarChartOptionsWithDefaults

Returns

void

Overrides

BaseChart.createChart

Defined in

charts/BarChart/BarChart.ts:206


update

update(data?, options?, override?): BarChart

Updates the chart which currently does a full reconstruction of the SVG DOM

Parameters

NameTypeDefault valueDescription
data?Data<AllSeriesTypes>undefinedOptional data you'd like to set for the chart before it will update. If not specified the update method will use the data that is already configured with the chart.
options?Options<AxisOptions, AxisOptions>undefinedOptional options you'd like to add to the previous options for the chart before it will update. If not specified the update method will use the options that have been already configured with the chart.
overridebooleanfalseIf set to true, the passed options will be used to extend the options that have been configured already. Otherwise the chart default options will be used as the base

Returns

BarChart

Inherited from

BaseChart.update

Defined in

charts/BaseChart.ts:67


detach

detach(): BarChart

This method can be called on the API object of each chart and will un-register all event listeners that were added to other components. This currently includes a window.resize listener as well as media query listeners if any responsive options have been provided. Use this function if you need to destroy and recreate Chartist charts dynamically.

Returns

BarChart

Inherited from

BaseChart.detach

Defined in

charts/BaseChart.ts:110


on

on<T>(event, listener): BarChart

Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.

Type parameters

NameType
Textends keyof BarChartEventsTypes

Parameters

NameTypeDescription
eventTName of the event. Check the examples for supported events.
listenerEventListener<BarChartEventsTypes[T]>The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details.

Returns

BarChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:130

on(event, listener): BarChart

Parameters

NameType
event"*"
listenerAllEventsListener<any>

Returns

BarChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:134

on(event, listener): BarChart

Parameters

NameType
eventstring
listenerEventListener<any>

Returns

BarChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:135


off

off<T>(event, listener?): BarChart

Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered.

Type parameters

NameType
Textends keyof BarChartEventsTypes

Parameters

NameTypeDescription
eventTName of the event for which a handler should be removed
listener?EventListener<BarChartEventsTypes[T]>The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list.

Returns

BarChart

Inherited from

BaseChart.off

Defined in

charts/BaseChart.ts:147

off(event, listener?): BarChart

Parameters

NameType
event"*"
listener?AllEventsListener<any>

Returns

BarChart

Inherited from

BaseChart.off

Defined in

charts/BaseChart.ts:151

off(event, listener?): BarChart

Parameters

NameType
eventstring
listener?EventListener<any>

Returns

BarChart

Inherited from

BaseChart.off

Defined in

charts/BaseChart.ts:152


initialize

initialize(): void

Returns

void

Inherited from

BaseChart.initialize

Defined in

charts/BaseChart.ts:159