FinancialChart - CandleVolume - ComponentOne ASP.NET Core Controls

Features

CandleVolume

CandleVolume charts are identical to standard Candlestick charts, except that the width of each bar is determined by a fifth value, volume.

Features

Chart Types

Interaction

Analytics

Sample
Source
Documentation

Description

CandleVolume charts are identical to standard Candlestick charts, except that the width of each bar is determined by a fifth value, volume.

CandleVolumeController.cs
CandleVolume.cshtml

using FinancialChartExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
  
namespace FinancialChartExplorer.Controllers 
{ 
    public partial class HomeController : Controller 
    { 
        public ActionResult CandleVolume() 
        { 
            var model = BoxData.GetDataFromJson(); 
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { }; 
            ViewBag.ChartType = C1.Web.Mvc.Finance.ChartType.CandleVolume; 
            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.CandleVolume_Text0)</p> 
} 
@section Summary{ 
    <p>@Html.Raw(Home.CandleVolume_Text1)</p> 
} 