FinancialChart - EquiVolume - ComponentOne ASP.NET Core Controls

Features

EquiVolume

EquiVolume charts are similar to Candlestick charts, but they only show the high and low values.

Features

Chart Types

Interaction

Analytics

Sample
Source
Documentation

Description

EquiVolume charts are similar to Candlestick charts, but they only show the high and low values.

In addition, the width of each bar is determined by a fifth value, volume.

EquiVolumeController.cs
EquiVolume.cshtml

using FinancialChartExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
  
namespace FinancialChartExplorer.Controllers 
{ 
    public partial class HomeController : Controller 
    { 
        public ActionResult EquiVolume() 
        { 
            var model = BoxData.GetDataFromJson(); 
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { }; 
            ViewBag.ChartType = C1.Web.Mvc.Finance.ChartType.EquiVolume; 
            return View(model); 
        } 
    } 
} 

@model List<FinanceData> 
@{ 
    ViewBag.DemoSettings = false; 
    var chartType = ViewBag.ChartType; 
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; 
} 
  
<script type="text/javascript">
    c1.documentReady(function () { 
        c1.getExtender(wijmo.Control.getControl("#rs"), "RangeSelector").min = 69.5; 
    }); 
</script>
  
<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="@chartType"> 
    <c1-items-source source-collection="@Model"></c1-items-source> 
    <c1-financial-chart-series binding="High,Low,Open,Close,Volume" name="BOX"></c1-financial-chart-series> 
    <c1-flex-chart-tooltip content="financialTooltip"></c1-flex-chart-tooltip> 
</c1-financial-chart> 
  
@await Html.PartialAsync("_RangeSelector") 
  
@section Description{ 
    <p>@Html.Raw(Home.EquiVolume_Text0)</p> 
    <p>@Html.Raw(Home.EquiVolume_Text1)</p> 
} 
@section Summary{ 
    <p>@Html.Raw(Home.EquiVolume_Text2)</p> 
} 