Pyramid Chart


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.


To create html5 Pyramid chart with AnyChart you have to set pyramid() method.

var chart = anychart.pyramid();

Let's take a look at the sample data set that shows the number of different genres sold in local bookstore «Nerds Inc.» in 2005.

Genre Quantity
Fantasy 637166
Science Fiction 721630
Detective 148662
Classics 78662
Textbooks 90000

Now we need to convert this data table into the format that can be used by AnyChart. Here is a snippet with the data in acceptable format.

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

You can see the web chart with this configuration below.



Base of a pyramid is the largest horizontal line of the pyramid chart. In this section we will quickly demonstrate how we can set 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.

var chart = anychart.pyramid(data);

// set base width to 50% of the container width


Note: Define value of baseWidth() using numbers to set fixed size of the base.


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

var chart = anychart.pyramid(data);

// upend the pyramid

Here is how reversed pyramid looks like:



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. Next sample of the pyramid chart has no spacing.

// disable spacing between parts of the chart

Here is how the pyramid chart without spacing looks like.



In this section we will describe main parts of pyramid chart visualization and ways to adjust it. Let's look how to apply a simple style to the chart.

  // define chart type and set data
  var chart = anychart.pyramid(data);
  // set chart inner color
  // chart inner color on hover
  // chart stroke
  // chart stroke on hover
  // set hatch type and color
  chart.hatchFill("diagonalbrick", "darkred");
  // adjust hatch type and color on hover
  chart.hoverHatchFill("diagonalbrick", "gold");

Using such settings we've created a pyramid colored in Gold, dark red border and set DiagonalBrick hatch fill. Also, we've defined that when the pyramid is hovered it's hatch will be highlighted with gold and the chart will be filled with dark red. Now let's apply this style to the chart:



Labels of a pyramid are text boxes with additional information for presented data. You can tune labels using labels() method.


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

  var chart = anychart.pyramid(data);

    // 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'

You can find more information about lines in Line Settings tutorial. Here is the pyramid with tuned connectors.



Position of the labels is controlled by 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 are using outsideLeft or outsideRight you can adjust length of labels connectors. Use connectorsLength() parameter to set custom length for all labels connectors.

var chart = anychart.pyramid(data);

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

Using these settings we have set each label 45px to the right from the each pyramid point. Using textFormatter() method we can adjust content for the labels.



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

var chart = anychart.pyramid(data);
// allow labels overlapping

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



In this section we will explain how to tune pyramid tooltip. Method tooltip() controls tooltip of the pyramid. With the following example let's force tooltip to show detailed description of the pyramid.



Marker is an object with a specified shape, size, and color or an image used to mark and to identify chart elements. AnyChart allows to add markers to any data element.

In the sample below we take single-series data described above and mark the element with the biggest value in series with a "Star5" of the "Gold" color.

To make marker visually appealing we set its size to 12 pixels in normal state, and 15px while hovered.

var chart = pyramid([
  {name: "Fantasy", value: 637166},
    name: "Science Fiction",
    value: 721630,
     // marker settings
     // enable marker
      enabled: true,
       // marker type
      type: "star5",
       // marker inner color
      fill: "gold",
       // marker size
      size: 12,
       // marker position
      position: "center",
       // marker anchor
      anchor: "center"
    // marker size if mouse is over
    hoverMarker: {
      size: 15
  {name: "Detective", value: 148662},
  {name: "Classics", value: 78662},
  {name: "Textbooks", value: 90000}

And here is a result - it's easy to notice that Science Fiction is the most popular genre and we are showing this on the chart:



Let's demonstrate how to apply different colors to different parts of pyramid. To apply the color to the exact point we need to set the fill parameter. In the sample below each point of the pyramid chart has custom color.


Hatch Fills

AnyChart charting library allows printing charts out. Some printers may render colors differently from the image we see on monitors, so it may be hard to distinguish charts colored differently on monitors and similarly on prints. Also it is impossible to identify colors on prints of monochrome printers. AnyChart has a very useful feature - hatch fills, ideal for differentiating elements on black and white display or for those who are color blind. Hatch fill is fully-independent structure, it doesn't rely on color fill and has its own settings. To see whole range of available hatch types see Hatch tutorial. To demonstrate hatch fill feature we've prepared the following sample. As you see it is completely monochrome. We have pyramid chart with 10 points in it. For every point we've applied different hatch fills parameter. That’s how we did it in our code:

var chart = anychart.pyramid([
// point value    hatch fill type
  {value: 232,    hatchFill: "diagonalcross"},
  {value: 224,    hatchFill: "zigzag"},
  {value: 252,    hatchFill: "horizontal"},
  {value: 219,    hatchFill: "vertical"},
  {value: 169,    hatchFill: "dashedbackwarddiagonal"},
  {value: 217,    hatchFill: "grid"},
  {value: 175,    hatchFill: "dashedforwarddiagonal"},
  {value: 199,    hatchFill: "dashedhorizontal"},
  {value: 297,    hatchFill: "plaid"},
  {value: 317,    hatchFill: "weave"}


You are looking at an outdated 7.12.0 version of this document. Switch to the 8.4.0 version to see the up to date information.