using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;


namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
    public partial class SharedController : Controller
    {
        public ActionResult Column3DInteractive()
        {
            List<double> chartValues = new List<double> { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 };
            List<ColumnSeriesData> chartData = new List<ColumnSeriesData>();

            chartValues.ForEach(p => chartData.Add(new ColumnSeriesData { Y = p }));

            ViewData["chartData"] = chartData;          

            return View();
        }
    }
}

<script src="https://code.highcharts.com/highcharts.js"></script>

@*All Highcharts 3D charts requires the highcharts-3rd.js module*@

<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script type="text/javascript">

    var chart;

    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
        $('#R2-value').html(chart.options.chart.options3d.depth);
    }

    function initSliders() {
        chart = Highcharts.charts[0];

        // Activate the sliders
        $('#R0').on('input', function () {
            chart.options.chart.options3d.alpha = this.value;
            showValues();
            chart.redraw(false);
        });
        $('#R1').on('input', function () {
            chart.options.chart.options3d.beta = this.value;
            showValues();
            chart.redraw(false);
        });
        $('#R2').on('input', function () {
            chart.options.chart.options3d.depth = this.value;
            showValues();
            chart.redraw(false);
        });


        showValues();
    }

</script>

@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering

@{ var chartOptions = new Highcharts
    {
        Chart = new Highsoft.Web.Mvc.Charts.Chart
        {
            Margin = new double[1] { 25 },
            Options3d = new ChartOptions3d
            {
                Enabled = true,
                Alpha = 15,
                Beta = 15,
                Depth = 50,
                ViewDistance = 25
            },
            Events = new ChartEvents
            {
                Load = "initSliders"
            }
        },
        Title = new Title
        {
            Text = "Chart rotation demo"
        },
        Subtitle = new Subtitle
        {
            Text = "'Test options by dragging the sliders below"
        },
        PlotOptions = new PlotOptions
        {
            Column = new PlotOptionsColumn
            {
                Depth = 8
            }
        },
        Series = new List<Series>
    {
                new ColumnSeries
                {
                    Data = @ViewData["chartData"] as List<ColumnSeriesData>
                }
            }
    };

    chartOptions.ID = "chart";
    var renderer = new HighchartsRenderer(chartOptions);
}

@Html.Raw(renderer.RenderHtml())

<div id="sliders">
    <table>
        <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15" /> <span id="R0-value" class="value"></span></td></tr>
        <tr><td>Beta Angle</td><td><input id="R1" type="range" min="-45" max="45" value="15" /> <span id="R1-value" class="value"></span></td></tr>
        <tr><td>Depth Angle</td><td><input id="R2" type="range" min="20" max="100" value="50" /> <span id="R2-value" class="value"></span></td></tr>
    </table>
</div>