Class: BarChart
Hierarchy
BaseChart<BarChartEventsTypes>↳
BarChart
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
| Name | Type | Description |
|---|---|---|
query | null | string | Element | A selector query string or directly a DOM element |
data | BarChartData | The 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
Defined in
charts/BarChart/BarChart.ts:188
Properties
data
• Protected data: BarChartData
Inherited from
Defined in
charts/BarChart/BarChart.ts:190
svg
• Protected Optional svg: Svg
Inherited from
Defined in
container
• Protected Readonly container: Element
Inherited from
Defined in
eventEmitter
• Protected Readonly eventEmitter: EventEmitter
Inherited from
Defined in
Methods
createChart
▸ createChart(options): void
Creates a new chart
Parameters
| Name | Type |
|---|---|
options | BarChartOptionsWithDefaults |
Returns
void
Overrides
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
| Name | Type | Default value | Description |
|---|---|---|---|
data? | Data<AllSeriesTypes> | undefined | Optional 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> | undefined | Optional 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. |
override | boolean | false | If 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
Inherited from
Defined in
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
Inherited from
Defined in
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
| Name | Type |
|---|---|
T | extends keyof BarChartEventsTypes |
Parameters
| Name | Type | Description |
|---|---|---|
event | T | Name of the event. Check the examples for supported events. |
listener | EventListener<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
Inherited from
Defined in
▸ on(event, listener): BarChart
Parameters
| Name | Type |
|---|---|
event | "*" |
listener | AllEventsListener<any> |
Returns
Inherited from
Defined in
▸ on(event, listener): BarChart
Parameters
| Name | Type |
|---|---|
event | string |
listener | EventListener<any> |
Returns
Inherited from
Defined in
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
| Name | Type |
|---|---|
T | extends keyof BarChartEventsTypes |
Parameters
| Name | Type | Description |
|---|---|---|
event | T | Name 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
Inherited from
Defined in
▸ off(event, listener?): BarChart
Parameters
| Name | Type |
|---|---|
event | "*" |
listener? | AllEventsListener<any> |
Returns
Inherited from
Defined in
▸ off(event, listener?): BarChart
Parameters
| Name | Type |
|---|---|
event | string |
listener? | EventListener<any> |
Returns
Inherited from
Defined in
initialize
▸ initialize(): void
Returns
void