Still have questions?
Contact support

Pyramid Chart

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:

API
Classanychart.charts.Pyramid
DATA
Data Fieldsname, value
Multiple SeriesNO
OPTIONS
StackedN/A
VerticalN/A
3DN/A
Error BarsN/A
SUPPORTED CHART PLOTS
PolarN/A
RadarN/A
ScatterN/A
StockN/A
RELATED TYPES
Funnel
Pie
Stacked
SEE ALSO
Chartopedia: Pyramid Chart
General Settings

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();

JsFiddle Playground

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

Here is a full list of methods used to configure visual settings that are available for the Area series:

You can learn more from the Appearance Settings article.

In the sample below, there is a Pyramid Chart with some of the appearance settings configured:

// edit appearance settings
chart.fill("#8B4513", 0.6);
chart.hoverFill("#8B4513", 0.3);
chart.selectFill("#8B4513", 0.8);
chart.stroke("#fff", 1);
chart.hoverStroke("#fff", 2);
chart.selectStroke("#fff", 3);

JsFiddle Playground

Note: setting colors for the chart does not visually separate blocks between each other. So, there is another way to set colors for the pyramid blocks: use the dataset and set the filling and stroking colors directly to each block. Notice that it is not necessary to adjust all appearance settings for a point.

chart = anychart.pyramid([
  {name: "Fantasy", value: 637166},
  {name: "Science Fiction", value: 721630, fill: "#1976d2", selectFill: "#1976d2", hatchFill: "backwardDiagonal", hoverHatchFill:"forwardDiagonal", selectHatchFill: "diagonalCross", stroke: "#455a64"},
  {name: "Detective", value: 148662},
  {name: "Classics", value: 78662},
  {name: "Textbooks", value: 90000}
]);

JsFiddle Playground

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.

You can set base size in pixels or in percentage ratio. Use string value for baseWidth() to define flexible base size in percentage ratio.

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

JsFiddle Playground

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:

JsFiddle Playground

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.

JsFiddle Playground

Labels

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.

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'
});

JsFiddle Playground

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 connectorsLength() parameter to set custom length for all labels connectors.

// change the labels position
chart.labels().position('outsideRight');  // place labels to the right    
chart.connectorLength(45);    // set 45px connectors length

These settings set each label's position as 45px to the right from each pyramid point. The format() method is to be used for adjusting the labels' content.

// format the labels text
chart.labels().format("{%name}: {%Value}");

JsFiddle Playground

Overlapping

After adjusting the content of the pyramid labels some of them moved to prevent overlapping. You can control overlapping using overlapMode(). The code sample below demonstrates setting labels with overlapping allowed.

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

Tooltips

A Tooltip is a text box displayed when a chart point is hovered. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.