Stacked Column Chart

This interactive column 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: 'Item 1', type: 'column', data: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], style: { fillColor: 'dodgerblue' } },
          { label: 'Item 2', type: 'column', data: [2, 3, 4, 5, 6, 6, 7, 8, 9, 9, 8, 7], style: { fillColor: 'orangered' } },
          { label: 'Item 3', type: 'column', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], style: { fillColor: 'orange' } },
        ];

        // Define the chart options:
        const opts = {
          chart: { type: 'stacked' },
          title: { label: 'My Stacked Column Chart' },
          xAxis: { categories: { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }},
        };

        // Draw the chart:
        const column = Pixi.Chart('#chart', 'column', series, opts);
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
  </body>
</html>
          

Methods

Main Methods

Name Return Description
.Chart (id, 'column', series, options) this Creates 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 column Unused.
data Array Empty Array having an object with the key(s) being the map element ID.
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 basic The column profile. This chart supports 'basic' and 'stacked'.
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 'categories' Type of plot (only 'categories' is supported).
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.