Surface Pyramid

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.data.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/datavisualization/ej.chart.js" type="text/javascript"></script>
<div id="chart_div"></div>

JavaScript

$(function () {
   $("#chart_div").ejChart({
      size: { width: "400", height: "285" },
      title: { text: "Global Sales" },
      legend: {
         position: "right",
         alignment: "center",
         columnCount: 1,
         itemPadding: 2,
         enableScrollbar: false,
      },
      commonSeriesOptions: {
         type: "pyramid",
         pyramidMode: "surface",  // this could be "linear" (default) or "surface"
         marker: {
            dataLabel: {
               visible: true,
               horizontalTextAlignment: "center",
               verticalTextAlignment: "center",
            },
         },
      },
      series: [{
      		points: [
      				{ x: "US", y: 15 },
      				{ x: "France", y: 25 },
      				{ x: "UK", y: 60 }
      		]
   		}]
   });
});