Pyramid Chart

• Overview
• Modules
• Quick Start
• General Settings
• Special Settings
  • Appearance
    • All Points
    • Individual Points
  • Base
  • Orientation
  • Padding
  • Labels
    • Connectors
    • Position
    • Overlapping
  • Labels and Tooltips (Text)
    • Tokens
    • Formatting Functions

Overview

Pyramid chart is a kind of Funnel chart that presents data in the similar way the funnel does. The main different of the pyramid chart from the funnel is an absence of the neck part.

This article explains how to create a basic Pyramid Chart as well as configure settings that are specific to the type. You can also see the table below to get a brief overview of the Pyramid chart's characteristics:

Modules

The Pyramid chart requires adding the Core and Pyramid and Funnel modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-pyramid-funnel.min.js"></script>

Learn more: Modules.

Quick Start

To create a Pyramid Chart, use the anychart.pyramid() chart constructor. Another way to create a Pyramid Chart is to use the anychart.charts.Pyramid class constructor.

The following sample demonstrates how a basic Pyramid chart is created:

chart = anychart.pyramid([
  {name: "Fantasy", value: 637166},
  {name: "Science Fiction", value: 721630},
  {name: "Detective", value: 148662},
  {name: "Classics", value: 78662},
  {name: "Textbooks", value: 90000}
]);

// draw chart
chart.container("container");
chart.draw();

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Pyramid Chart (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Special Settings

Appearance

All Points

The appearance settings of a Pyramid chart can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods.

Combine them with the following methods:

• fill() to set the fill
• hatchFill() to set the hatch fill
• stroke() to set the stroke

Also, you can use some other methods from anychart.core.StateSettings.

In the sample below, there is a Pyramid chart with appearance settings configured:

// configure the visual settings of the chart
chart.normal().fill("#004d39", 0.3);
chart.hovered().fill("#004d39", 0.1);
chart.selected().fill("#004d39", 0.5);
chart.hovered().hatchFill("forward-diagonal", "#004d39", 1, 15);
chart.selected().hatchFill("forward-diagonal", "#004d39", 1, 15);
chart.normal().stroke("white");
chart.hovered().stroke("white", 2);
chart.selected().stroke("white", 2);

Individual Points

If you use object notation to set the data, you can change the appearance (and some other settings) of individual points by adding special fields to your data:

// create data
var data = [
  {name: "Fantasy", value: 637166},
  {name: "Science Fiction", value: 721630,
   normal:   {
             hatchFill: "backward-diagonal",
             stroke: "black"
             },
   hovered:  {
               fill: "lightGray",
               hatchFill: "backward-diagonal",
               stroke: "black"
             },
   selected: {
               fill: "white",
               hatchFill: "backward-diagonal",
               stroke: "black"
             }
  },
  {name: "Detective", value: 148662},
  {name: "Classics", value: 78662},
  {name: "Textbooks", value: 90000}
];

// create a chart and set the data  
chart = anychart.pyramid(data);

Base

The base of a pyramid is the largest horizontal line of the pyramid chart. In this section, we will quickly demonstrate how we can set the custom base width and invert base position.

Use the baseWidth() to set the base size (in pixels or as a percentage):

// set base width to 50% of the container width
chart.baseWidth("50%")

Note: Define an integer value of baseWidth() to set fixed size of the base.

Orientation

By default, the base of the pyramid is placed at the bottom of the chart. Use the reversed() method to turn the pyramid upside down.

// turn the pyramid upside-down
chart.reversed(true);

Here is how reversed pyramid looks like:

Padding

As you can see, each part of a pyramid is separated from another with some space. The space between each part of pyramid chart is controlled by a pointsPadding() parameter.

// set space between pyramid blocks
chart.pointsPadding(5);

Here is how the pyramid chart with a significant spacing looks like.

Labels

Labels are text or image elements that can be placed anywhere on any chart. This section explains how to adjust the connectors and position of labels and to allow or forbid overlapping. To learn how to modify the text of labels, see the Labels and Tooltips (Text) section of this article.

Connectors

The line that joins a label with a particular pyramid point is called a connector. You can tune connectors visual appearance using the connectorsStroke() method.

chart.connectorStroke({
  // set thickness of the connectors
  thickness: 2,
  // set color of the connectors
  color: '#444',
  // set dashed connectors. Dashes are 4px and gaps are 2px
  dash: '4 2'
});

Find more information about lines in Line Settings tutorial.

Note: if you want to hide connectors set the null value for connectorsStroke() method.

Position

The position of the labels is controlled by the position() method. There are five acceptable values for pyramid labels:

• "inside" - place labels inside each pyramid point.
• "outsideLeftInColumn" - place labels to the left of the pyramid and align them in a column.
• "outsideRightInColumn" - place labels to the right of the pyramid and align them in a column.
• "outsideLeft" - place labels to the left of the pyramid.
• "outsideRight" - place labels to the right of the pyramid.

If you use "outsideLeft" or "outsideRight", it will be possible to adjust the length of labels connectors. Use the connectorsLength() method to set custom length for all labels connectors:

// place labels to the right
chart.labels().position('outside-right');

// set 45px connectors length   
chart.connectorLength(45);

Overlapping

Sometimes labels overlap each other. To allow or forbid overlapping, use the overlapMode() method. The code sample below demonstrates setting labels with overlapping allowed.

// allow labels overlapping
chart.overlapMode("allowOverlap");

Labels and Tooltips (Text)

For text labels, font settings and text formatters are available. The same settings can be applied to tooltips - text boxes displayed when chart points are hovered over.

Tokens

To change the text of labels, combine the labels() and format() methods with tokens.

To configure tooltips, do the same with the tooltip() and format() methods.

Besides tokens that work with all chart types, there is a token that is specific to the Pyramid - {%yPercentOfTotal}. It returns an element's percentage of the total.

Also, you can add a custom field to your data and use a custom token corresponding to it.

This sample shows how to work with tokens:

// create a chart and set the data
var chart = anychart.pyramid([
  {name: "Fantasy", value: 637166, custom_field: "info 1"},
  {name: "Science Fiction", value: 721630, custom_field: "info 1"},
  {name: "Detective", value: 148662, custom_field: "info 1"},
  {name: "Classics", value: 78662, custom_field: "info 1"},
  {name: "Textbooks", value: 90000, custom_field: "info 1"}
]);

// configure labels
chart.labels().format("{%name}: {%yPercentOfTotal}%");

// configure tooltips
chart.tooltip().format("{%yPercentOfTotal}% ({%value})\n\n{%custom_field}");

Formatting Functions

To configure labels and tooltips, you can use formatting functions instead of tokens.

You can also add a custom field to your data and refer to it by using the getData() method.

In the sample below, functions modify the format of labels and tooltips depending on elements' percentages of the total, and a custom data field is used:

// create a chart and set the data
var chart = anychart.pyramid([
  {name: "Fantasy", value: 637166, custom_field: "info 1"},
  {name: "Science Fiction", value: 721630, custom_field: "info 2"},
  {name: "Detective", value: 148662, custom_field: "info 3"},
  {name: "Classics", value: 78662, custom_field: "info 4"},
  {name: "Textbooks", value: 90000, custom_field: "info 5"}
]);

// enable HTML for labels and tooltips
chart.labels().useHtml(true);
chart.tooltip().useHtml(true);

// configure labels
chart.labels().format(function() {
  var percentOfTotal = (this.getData("value")*100)/this.getStat("sum");
  if (percentOfTotal > 40)
      return "<span style='color:#dd2c00;font-weight:bold'>" +
             this.name + ": " + percentOfTotal.toFixed(1) + "%</span>";
  return this.name + ": " +percentOfTotal.toFixed(1) + "%";
});

// configure tooltips
chart.tooltip().format(function() {
  var percentOfTotal = (this.getData("value")*100)/this.getStat("sum");
  if (percentOfTotal > 40)
      return "<span style='font-size:18'>" +
             percentOfTotal.toFixed(1) + "% (" +
             this.value + ")</span><br><br>" +
             this.getData("custom_field");
  return percentOfTotal.toFixed(1) + "% (" + this.value +
         ")<br><br>" + this.getData("custom_field");
});