@using Trirand.Web.Core
@using Trirand.Web.Core.Chart
@using Trirand.Web.Core.Chart.ChartAxis;
@using Trirand.Web.Core.Chart.ChartFeature;
@using Trirand.Web.Core.Chart.Series;
@using CoreDemo.Controllers.Chart

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - Line Marker</title> 
    <script type="text/javascript" src="~/js/trirand/chart/corechart.min.js"></script>
</head>
<body>
    <div>
        <!--
        The Html.Trirand().CoreChart() helper has two parameters
            - the model of the chart -- all chart properties, data and settings
            - the ID of the chart -- can be used for client-side manipulation
        In this example we are using hardcoded model in the View, but you can contruct the model in 
        the controller based on runtime criteria and database data and pass the model 
        to the View using ViewData
        -->
        @(Html.Trirand().CoreChart(
             new CoreChart
             {
                Width = "900px",
                Title = new List<Title>
                {
                    new Title()
                    {
                        Text = "Temperature",
                        Subtext = "Canada"
                    }
                },
                Tooltip = new ToolTip
                {
                    Trigger = TriggerType.Axis
                },
                Legend = new Legend
                {
                    Data = new List<string>{ "Montreal", "Quebec" }
                },
                Toolbox = new ToolBox
                {
                    Show = true,
                    Feature = new Feature
                    {
                        DataZoom = new DataZoom
                        {
                            YAxisIndex = "none"
                        },
                        DataView = new DataView
                        {
                            ReadOnly = false
                        },
                        MagicType = new MagicType
                        {
                            Type = new List<object>() { "line", "bar" }
                        },
                        Restore = new Restore { Show = false },
                        SaveAsImage = new FeatureImage { Show = false }
                    },
                },
                XAxis = new List<Axis>()
                {
                    new CategoryAxis()
                    {
                        Name = "x",
                        BoundaryGap = false,
                        Data = new List<string> { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"}
                    }
                },
                YAxis = new List<Axis>()
                {
                    new ValueAxis()
                    {
                       AxisLabel = new AxisLabel
                       {
                           Formatter = "{value} °C"
                       }
                    }
                },
                Series = new List<object>()
                {
                    new Line()
                    {
                        Name = "Montreal",
                        Data = new List<int> { 11, 11, 15, 13, 12, 13, 10 },
                        MarkPoint = new MarkPoint
                        {
                            Data = new List<MarkPointData>()
                            {
                                new MarkPointData
                                {
                                    type = "max",
                                    name = "Maximum Temperature"
                                },
                                new MarkPointData
                                {
                                    type = "min",
                                    name = "Minimum Temperature"
                                }
                            }
                        },
                        MarkLine = new MarkLine
                        {
                            Data = new List<MarkPointData>()
                            {
                                new MarkPointData
                                {
                                    type = "average",
                                    name = "Average Temperature"
                                }
                            }
                        }
                    },
                    new Line()
                    {
                        Name = "Quebec",
                        Data = new List<int> {1, -2, 2, 5, 3, 2, 0 },
                        MarkPoint = new MarkPoint
                        {
                            Data = new List<MarkPointData2>()
                            {
                                new MarkPointData2
                                {
                                    name = "Maximum Temperature",
                                    value = -2,
                                    xAxis = 1,
                                    yAxis = -1.5
                                }
                            }
                        },
                        MarkLine = new MarkLine
                        {
                            Data = new List<MarkPointData>()
                            {
                                new MarkPointData
                                {
                                    type = "average",
                                    name = "Average Temperature"
                                }
                            }
                        }
                    }
                }
             }
            , "Chart")
        )
             
        <br />
        <div>
            @await Component.InvokeAsync("CodeTabs", new { product = "chart", example = "line/marker" })
        </div>
    </div>
</body>
</html>

using Microsoft.AspNetCore.Mvc;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/line/marker")]
        public ActionResult Marker()
        {
            return View("~/Views/Chart/Line/Marker.cshtml");

        }
    }

    public class MarkPointData
    {
        public string type { get; set; }
        public string name { get; set; }
    }

    public class MarkPointData2
    {
        public string name { get; set; }
        public double value { get; set; }
        public double xAxis { get; set; }
        public double yAxis { get; set; }
    }
}