Pie Chart

This interactive Pie 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: 325px; height: 235px; 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: 'pie', value: 12, style: { fillColor: 'dodgerblue', stroke: 'white' } },
          { label: 'Item 2', type: 'pie', value: 4, style: { fillColor: 'orangered', stroke: 'white' } },
          { label: 'Item 3', type: 'pie', value: 7, style: { fillColor: 'orange', stroke: 'white' } },
          { label: 'Item 4', type: 'pie', value: 2, style: { fillColor: 'limegreen', stroke: 'white' } },
          { label: 'Item 5', type: 'pie', value: 11, style: { fillColor: 'darkviolet', stroke: 'white' } },
        ];

        // Define the chart options:
        const opts = {
          chart: { width: 300, height: 215 },
          title: { label: 'Pie' },
        };

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

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

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


<!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: 350px; height: 250px; 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:
        series = [
          { label: 'Item 1', type: 'pie', value: 12 },
          { label: 'Item 2', type: 'pie', value: 4 },
          { label: 'Item 3', type: 'pie', value: 7 },
          { label: 'Item 4', type: 'pie', value: 2 },
          { label: 'Item 5', type: 'pie', value: 11 },
        ];

        // Define the chart options:
        const opts = {
          chart: { width: 300, height: 215, hole: 0.8 },
          title: { label: 'Pie with hole' },
        };

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

Methods

Main Methods

Name	Return	Description
.Chart (id, 'pie', 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	null	The x-axis value of the SVG element(s) that fired the event. It is null for a Pie Chart.
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	pie	Unused.
Value	Number		Value of a Pie slice.
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	'pie'	The type of Pie chart (currently, 'pie' option only).
chart.hole	Number	0	The size of the pie hole from 0 to 1.
chart.width	Number	350	The outer width of the chart.
chart.height	Number	250	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 pie center.
chart.grid.y	Number	-	The vertical position of the pie center.
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.

- means a computed value.

Plot Line Chart

Polar Chart