Waterfall Chart

This interactive Waterfall chart is rendered within the browser using SVG.


<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/pixicharts.min.css">
    <script src="../js/pixicharts.min.js"></script>
    <style>
      #chart { width: 620px; height: 300px; padding: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
    </style>
    <script>
      window.addEventListener('load', () => {
        'use strict';

        // Define the series options:
        const series = [
          { label: 'Net Income 2016', type: 'start', prefix: '$', suffix: 'M', data: [451.4] },
          { label: 'Revenue', type: '', prefix: '$', suffix: 'M', data: [218.2] },
          { label: 'Cost of Sales', type: '', prefix: '$', suffix: 'M', data: [89.7] },
          { label: 'Selling & Admin', type: '', prefix: '$', suffix: 'M', data: [-179.8] },
          { label: 'Other Expenses', type: '', prefix: '$', suffix: 'M', data: [45.0] },
          { label: 'Income Taxes', type: '', prefix: '$', suffix: 'M', data: [-45.4] },
          { label: 'Net Income 2017', type: 'end', prefix: '$', suffix: 'M', data: [0] },
        ];

        // Define the chart options:
        const opts = {
          title: {
            label: 'Changes in Income and Expense Items',
          },
          subtitle: {
            label: 'Net Income Change Between 2016 and 2017',
            y: 40,
          },
          yAxis: {
            max: 1000,
            min: 0,
            title: {
              label: 'in $ Million',
            },
          },
        };

        // Draw the chart:
        const waterfall = Pixi.Chart('#chart', 'waterfall', series, opts);

        // Add an event listener that fires when a new SVG element
        // is selected:
        waterfall.on('over', () => {
          $('#event').text('Event over!');
        });

        // Add an event listener that fires when the mouse leaves
        // the selected SVG element:
        waterfall.on('out', () => {
          $('#event').text('Event out!');
        });
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
  </body>
</html>
          

Methods

Main Methods

Name Return Description
.Chart (id, 'waterfall', series, options) this Creates, draws and returns the Chart object.
.attachTooltip (xmlString, width, height) this Attachs a user defined tooltip to the selected element. The user defined HTML5 tooltip is included in a SVG foreignObject element (requires IE12+).

Event Methods

Name Return Description
.addEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on.
.addOneTimeEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on for a one-time event.
.removeEventListener (type, listener) this Removes the event listener previously registered with addEventListener ().
.on (type, listener) this Alias on addEventListener ().
.one (type, listener) this Alias on addOneTimeEventListener ().
.off (type, listener) this Alias on removeEventListener ().

Event Types

Attribute Type Object Info
'over' String OverEvent Fired when the mouse enters on a new element.
'out' String - Fired when the mouse leaves the selected element.

Event Objects

OverEvent
Attribute Type Info
x String The x-axis value of the SVG element(s) that fired the event.
series Array The attributes of the selected SVG element(s). The array contains one object per SVG element(s).
series[n].label String The name of the serie.
series[n].value String The y value of the SVG element.
series[n].color String The color associated to this SVG element.

Series Options

The series are specified in an array of objects. The serie object has the following attributes:

Attribute Type Default Info
label String empty The name of the data value.
prefix String The prefix attribute.
suffix String The suffix attribute.
type String It defines if it is the 'start' element, the 'end' element or un intermediate element. Values are: 'start, 'end' or ''.
data Array Empty Array containing the value of waterfall element.
visible Boolean true Specifies if the data value has to be displayed or not above or below the bar.
style Object null The style to apply to the SVG elements that belong to the serie. By default, the css style is applied.
style.fillColor String undefined The fill color attribute.
style.fillOpacity Number undefined The color opacity attribute.
style.stroke String undefined The stroke color attribute.
style.strokeOpacity Number undefined The stroke color opacity attribute.
style.strokeWidth Number undefined The stroke width attribute.
over Object null The style to apply to the SVG elements that belong to the serie when the mouse is over the element. By default, the css style is applied.
over.fillColor String undefined The fill color attribute.
over.fillOpacity Number undefined The color opacity attribute.
over.stroke String undefined The stroke color attribute.
over.strokeOpacity Number undefined The stroke color opacity attribute.
over.strokeWidth Number undefined The stroke width attribute.

Chart Options

Attribute Type Default Info
chart Object The attributes of the chart.
chart.type String 'waterfall' The type of Waterfall chart (currently, 'waterfall' option only).
chart.width Number 620 The outer width of the chart.
chart.height Number 300 The outer height of the chart.
chart.grid Object - The position and the size of the chart inside the outer box.
chart.grid.x Number - The horizontal position of the origin.
chart.grid.y Numer - The vertical position of the origin.
chart.grid.width Number - The width of the chart.
chart.grid.height Number - The height of the chart.
chart.grid.margin Object The inner box margins.
chart.grid.margin.top Number 0 The inner box top margin.
chart.grid.margin.left Number 0 The inner box left margin.
chart.grid.margin.right Number 0 The inner box right margin.
chart.grid.margin.bottom Number 0 The inner box bottom margin.
title Object The title attributes.
title.label String The name of the title.
title.x Number - The horizontal anchor position of the title.
title.y Number - The vertical anchor position of the title.
subtitle Object The subtitle attributes.
subtitle.label String The text for the subtitle.
subtitle.x Number - The horizontal anchor position of the subtitle.
subtitle.y Number - The vertical anchor position of the subtitle.
legend Object The legend attributes.
legend.enabled Boolean true Enables or disables the legend.
legend.floating Boolean true Enables or not the legend to float above the map.
legend.layout String vertical The legend could be horizontal or vertical.
legend.align Object The legend position on the grid.
legend.align.horizontal String right The legend position on x axis could be: left, right or middle
legend.align.vertical String top The legend position on y axis could be: top, bottom or middle
legend.shift Object The shift position of the legend on the grid.
legend.shift.x Number 0 Moves slightly the legend on the x direction.
legend.shift.y Number 0 Moves slightly the legend on the y direction.
legend.icon Object The icon rectangle size.
legend.icon.width Number 10 The icon rectangle width.
legend.icon.height Number 10 The icon rectangle height.
tooltip Object The tooltip attributes.
tooltip.enabled Boolean true Enables (true) or disables (false) the tooltip.
tooltip.animated Boolean true smoothly moves (true) or not (false) the tooltip from previous item to current.
xAxis Object The attributes of the X axis.
xAxis.type String - Continuous or discrete values (plot or categories).
xAxis.cursor Object Cursor attributes.
xAxis.cursor.enabled Boolean false Cursor visibility.
xAxis.plot Object The plot attributes
xAxis.type String Number The plot values (number or datetime)
xAxis.start Number 0 The start value
xAxis.increment Number 1 The step value
xAxis.suffix String '' The suffix attribute.
xAxis.categories Object The category attributes
xAxis.categories.data Array An array defining the X axis values.
yAxis Object The attributes of the Y axis.
yAxis.min Number 0 The minimal value.
yAxis.max Number - The maximal value.
yAxis.minor Number - The incremental value.
yAxis.title Object The attributes of the Y Axis legend.
yAxis.title.label String The legend name.
yAxis.title.x Number - The horizontal anchor point.
yAxis.title.y Number - The vertical anchor point.

- means a computed value.