Class: LineChart

Hierarchy

• BaseChart<LineChartEventsTypes>

  ↳ LineChart

Properties

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

---

data

• Protected data: LineChartData

Inherited from

BaseChart.data

Defined in

charts/LineChart/LineChart.ts:239

Methods

update

▸ update(data?, options?, override?): LineChart

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

LineChart

Inherited from

BaseChart.update

Defined in

charts/BaseChart.ts:67

---

detach

▸ detach(): LineChart

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

LineChart

Inherited from

BaseChart.detach

Defined in

charts/BaseChart.ts:110

---

on

▸ on<T>(event, listener): LineChart

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 LineChartEventsTypes

Parameters

Name	Type	Description
event	T	Name of the event. Check the examples for supported events.
listener	EventListener<LineChartEventsTypes[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

LineChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:130

▸ on(event, listener): LineChart

Parameters

Name	Type
event	"*"
listener	AllEventsListener<any>

Returns

LineChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:134

▸ on(event, listener): LineChart

Parameters

Name	Type
event	string
listener	EventListener<any>

Returns

LineChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:135

---

off

▸ off<T>(event, listener?): LineChart

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 LineChartEventsTypes

Parameters

Name	Type	Description
event	T	Name of the event for which a handler should be removed
listener?	EventListener<LineChartEventsTypes[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

LineChart

Inherited from

BaseChart.off

Defined in

charts/BaseChart.ts:147

▸ off(event, listener?): LineChart

Parameters

Name	Type
event	"*"
listener?	AllEventsListener<any>

Returns

LineChart

Inherited from

BaseChart.off

Defined in

charts/BaseChart.ts:151

▸ off(event, listener?): LineChart

Parameters

Name	Type
event	string
listener?	EventListener<any>

Returns

LineChart

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

---

createChart

▸ createChart(options): void

Creates a new chart

Parameters

Name	Type
options	LineChartOptionsWithDefaults

Returns

void

Overrides

BaseChart.createChart

Defined in

charts/LineChart/LineChart.ts:255

Constructors

constructor

• new LineChart(query, data, options?, responsiveOptions?)

This method creates a new line chart.

Example

// Create a simple line chart
const data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// As options we currently only set a static size of 300x200 px
const options = {
  width: '300px',
  height: '200px'
};

// In the global name space Chartist we call the Line function to initialize a line chart. As a first parameter we pass in a selector where we would like to get our chart created. Second parameter is the actual data object and as a third parameter we pass in our options
new LineChart('.ct-chart', data, options);

Example

// Use specific interpolation function with configuration from the Chartist.Interpolation module

const chart = new LineChart('.ct-chart', {
  labels: [1, 2, 3, 4, 5],
  series: [
    [1, 1, 8, 1, 7]
  ]
}, {
  lineSmooth: Chartist.Interpolation.cardinal({
    tension: 0.2
  })
});

Example

// Create a line chart with responsive options

const data = {
  // A labels array that can contain any sort of values
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// In addition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.
const responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        // Will return Mon, Tue, Wed etc. on medium screens
        return value.slice(0, 3);
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        // Will return M, T, W etc. on small screens
        return value[0];
      }
    }
  }]
];

new LineChart('.ct-chart', data, null, responsiveOptions);

Parameters

Name	Type	Description
query	null | string | Element	A selector query string or directly a DOM element
data	LineChartData	The data object that needs to consist of a labels and a series array
options?	LineChartOptions<AxisOptions, AxisOptions>	The options object with options that override the default options. Check the examples for a detailed list.
responsiveOptions?	ResponsiveOptions<LineChartOptions<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/LineChart/LineChart.ts:237