FinancialChart - Line Break - ComponentOne ASP.NET Core Controls

Features

Line Break

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.

Movements are depicted with box colors and styles; movements that continue the trend of the previous box are colored similarly while movements that trend oppositely are indicated with a different color and/or style. The opposite trend is only drawn if its value exceeds the extreme value of the previous n number of boxes or lines, which is determined by the newLineBreaks option.

LineBreakController.cs
LineBreak.cshtml

using System.Collections.Generic; 
using FinancialChartExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
  
namespace FinancialChartExplorer.Controllers 
{ 
    public partial class HomeController : Controller 
    { 
        public ActionResult LineBreak() 
        { 
            var model = BoxData.GetDataFromJson(); 
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateLineBreakSettings() }; 
            return View(model); 
        } 
  
        private static IDictionary<string, object[]> CreateLineBreakSettings() 
        { 
            var settings = new Dictionary<string, object[]> 
            { 
                {"LineBreak", new object[]{"1","2","3","4","5","6"}}, 
                {"Stroke", new object[]{"LightBlue","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}}, 
                {"AltStroke", new object[]{"LightBlue","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}}, 
                {"Fill", new object[]{"LightBlue","Transparent","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}}, 
                {"AltFill ", new object[]{"Transparent","LightBlue","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}} 
            }; 
  
            return settings; 
        } 
  
    } 
} 

@model List<FinanceData> 
@{ 
    ViewBag.DemoSettings = true; 
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; 
    var chartStyle = new SVGStyle() { Stroke = "LightBlue", Fill = "LightBlue" }; 
    var chartAltStyle = new SVGStyle() { Stroke = "LightBlue", Fill = "Transparent" }; 
} 
  
<script type="text/javascript">
    function customChangeLineBreak(control, value) { 
        control.options = { lineBreak: { newLineBreaks: +value } }; 
    } 
  
    function customChangeStroke(control, value) { 
        setColor(control, "style", "stroke", value); 
    } 
  
    function customChangeAltStroke(control, value) { 
        setColor(control, "altStyle", "stroke", value); 
    } 
  
    function customChangeFill(control, value) { 
        setColor(control, "style", "fill", value); 
    } 
  
    function customChangeAltFill(control, value) { 
        setColor(control, "altStyle", "fill", value); 
    } 
  
    function setColor(control, styleName, attName, value) { 
        control.series[0][styleName][attName] = value; 
        control.invalidate(); 
    } 
</script>
  
<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="LineBreak" line-break-new-line-breaks="1"> 
    <c1-items-source source-collection="@Model"></c1-items-source> 
    <c1-financial-chart-series binding="High,Low,Open,Close" style="chartStyle" alt-style="chartAltStyle" 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.LineBreak_Text0)</p> 
    <p>@Html.Raw(Home.LineBreak_Text1)</p> 
} 
@section Summary{ 
    <p>@Html.Raw(Home.LineBreak_Text2)</p> 
} 