Pyramid Chart

• Overview
• Quick Start
• General Settings
• Special Settings
  • Appearance
  • Base
  • Orientation
  • Padding
  • Labels
    • Connectors
    • Position
    • Overlapping
  • Tooltips

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:

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

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

• fill(), hatchFill(), stroke() set the color, fill, hatch fill, and stroke
• hoverFill(), hoverHatchFill(), hoverStroke() configure the visual settings on hover
• selectFill(), selectHatchFill(), selectStroke() configure the visual settings on select

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

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

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%")

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

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

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.