FinancialChart - Renko - ComponentOne ASP.NET Core Controls

Features

Renko

A Line Break or Three Line Break chart uses vertical boxes or lines to illustrate the price changes of an asset or market.

Features

Chart Types

Interaction

Analytics

Sample
Source
Documentation

Settings

Description

A Line Break or Three Line Break chart uses vertical boxes or lines to illustrate the price changes of an asset or market.

The Renko chart uses bricks of uniform size to chart the price movement. When a price moves to a greater or lesser value than the preset boxSize option required to draw a new brick, a new brick is drawn in the succeeding column. The change in box color and direction signifies a trend reversal.

RenkoController.cs
Renko.cshtml

using System.Collections.Generic; 
using FinancialChartExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
  
namespace FinancialChartExplorer.Controllers 
{ 
    public partial class HomeController : Controller 
    { 
        public ActionResult Renko() 
        { 
            var model = BoxData.GetDataFromJson(); 
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateRenkoSettings() }; 
            return View(model); 
        } 
  
        private static IDictionary<string, object[]> CreateRenkoSettings() 
        { 
            var settings = new Dictionary<string, object[]> 
            { 
                {"Options.Renko.BoxSize", new object[]{"2","3","4","5","6","7","8","9","10","20"}}, 
                {"Options.Renko.RangeMode", new object[]{"ATR","Fixed"}}, 
                {"Options.Renko.Fields", new object[]{"High","Low","Open","Close","HL2","HLC3","HLOC4"}}, 
            }; 
  
            return settings; 
        } 
  
    } 
} 

@model List<FinanceData> 
@{ 
    ViewBag.DemoSettings = true; 
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; 
} 
  
  
<script type="text/javascript">
    function convertOptions_Renko_BoxSize(value) { 
        return +value; 
    } 
  
    function convertOptions_Renko_RangeMode(value) { 
        return wijmo.chart.finance.RangeMode[value]; 
    } 
  
    function convertOptions_Renko_Fields(value) { 
        return wijmo.chart.finance.DataFields[value]; 
    } 
  
</script>
  
<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="Renko" renko-box-size="2" renko-range-mode="ATR" renko-fields="High"> 
    <c1-items-source source-collection="@Model"></c1-items-source> 
    <c1-financial-chart-series binding="High,Low,Open,Close"  name="BOX"></c1-financial-chart-series> 
    <c1-flex-chart-tooltip content="financialTooltip"></c1-flex-chart-tooltip> 
</c1-financial-chart> 
  
  
@section Description{ 
    <p>@Html.Raw(Home.Renko_Text0)</p> 
    <p>@Html.Raw(Home.Renko_Text1)</p> 
} 
@section Summary{ 
    <p>@Html.Raw(Home.Renko_Text2)</p> 
} 