Funnel - Adaptive Layout

Narrow down the preview area to make the widget adapt to the new size.

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/17.2.3/js/dx.viz.js"></script>
<div id="funnelContainer"></div>

CSS

#funnelContainer {
    max-width: 800px;
    margin: 0 auto;
    transform: rotate(90deg)
}

JavaScript

var siteStats = [
    { action: "Visited the Website", doneBy: 9152 },
    { action: "Downloaded a Trial", doneBy: 6879 },
    { action: "Contacted Support", doneBy: 5121 },
    { action: "Subscribed", doneBy: 2224 },
    { action: "Renewed", doneBy: 1670 }
];
 
$(function () {
    $("#funnelContainer").dxFunnel({
        dataSource: siteStats,
        title: {
            text: "Website Conversions",
            margin: 30
        },
        legend: { visible: true },
        argumentField: "action",
        valueField: "doneBy",
        label: {
            visible: true,
            backgroundColor: "none",
            customizeText: function (e) {
                return "<p style='font-size: 40px'>" + e.percentText + "</p>";
            }
        },
        adaptiveLayout: {
        		width: 500,
            keepLabels: true
        }
    });
});