Toggle navigation Highcharts
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
  • Home
  • Products
    • Highcharts
    • Highstock
    • Highmaps
    • Mobile
    • Highcharts Cloud
    • Highcharts Editor
    • Wrappers
    • Plugins
  • Demo
    • Highcharts demos
    • Highstock demos
    • Highmaps demo
  • Docs
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
  • Support
    • Support
    • Download
  • Blog
  • Community
    • Project Showcase
    • Chart Code Showcase
    • Contribute
  • Buy
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
Highcharts .NET 
  • Highcharts .NET
  • Highstock .NET
Demos 
  • Demos
  • API
  • Docs
  • See on NuGet
  • Download 
  • Demo
  • API
  • Docs
  • See on NuGet
  • Download 
Highcharts .NET
 Highcharts  Highstock
  • Line charts
    • Basic line
    • Ajax loaded data, clickable points
    • With data labels
    • With annotations
    • Time series, zoomable
    • Spline with inverted axes
    • Spline with symbols
    • Spline with plot bands
    • Time data with irregular intervals
    • Logarithmic axis
  • Area charts
    • Basic area
    • Area with negative values
    • Stacked area
    • Percentage area
    • Area with missing points
    • Inverted axes
    • Area-spline
    • Area range
    • Area range and line
    • Sparkline charts
    • Streamgraph
  • Column and bar charts
    • Basic bar
    • Stacked bar
    • Bar with negative stack
    • Basic column
    • Column with negative values
    • Stacked column
    • Stacked and grouped column
    • Stacked percentage column
    • Column with rotated labels
    • Column with drilldown
    • Fixed placement columns
    • Data defined in a HTML table
    • Column range
  • Pie charts
    • Pie chart
    • Pie with legend
    • Semi circle donut
    • Pie with drilldown
    • Pie with gradient fill
    • Pie with monochrome fill
  • Scatter and bubble charts
    • Scatter plot
    • Bubble chart
    • 3D bubbles
  • Dynamic charts
    • Spline updating each second
    • Click to add a point
    • Master-detail chart
  • Combinations
    • Dual axes, line and column
    • Multiple axes
    • Scatter with regression line
    • Advanced timeline
  • 3D charts
    • 3D column
    • 3D column with null and 0 values
    • 3D column with stacking and grouping
    • 3D pie
    • 3D donut
    • 3D scatter chart
  • Gauges
    • Angular gauge
    • Activity gauge
    • Clock
    • Gauge with dual axes
    • VU meter
    • Bullet graph
  • Heat and tree maps
    • Heat map
    • Large heat map
    • Tile map, honeycomb
    • Tree map with color axis
    • Tree map with levels
    • Large tree map
  • More chart types
    • Polar chart
    • Spiderweb
    • Wind rose
    • Box plot
    • Error bar
    • Waterfall
    • Funnel chart
    • Pyramid chart
    • Polygon series
    • General drawing
list

Controller Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;


namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
    public partial class SharedController : Controller
    {
        public ActionResult Polygon()
        { 
            List<ScatterSeriesData> observationData = new List<ScatterSeriesData>();

            

            Random r = new Random();
            for (int i = 0; i < 250; i++)
            {
                double x = r.Next(151, 176);
                double y = r.Next(51, 104);
                observationData.Add(new ScatterSeriesData { X = x, Y = y });
            }

            ViewData["observationData"] = observationData;

            return View();
        }      
    }
}
                

Controller Code

<script src="https://code.highcharts.com/highcharts.js"></script>


@*The highchart-more.js file contains definitions for additional chart types not available
    in the main highcharts.js file such as "arearange". You need to include this file if you
    are using these types of charts*@

<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering

@{ var chartOptions =
      new Highcharts
      {
          Title = new Title
          {
              Text = "Height vs Weight"
          },
          Subtitle = new Subtitle
          {
              Text = "Polygon series in Highcharts"
          },
          XAxis = new List<XAxis>
              {
                new XAxis
                {
                    GridLineWidth = 1,
                    Title = new XAxisTitle
                    {
                        Text = "Height (cm)"
                    },
                    StartOnTick = true,
                    EndOnTick = true,
                    ShowLastLabel = true
                }
                              },
          YAxis = new List<YAxis>
              {
                new YAxis
                {
                    Title =  new YAxisTitle
                    {
                        Text = "Weight (kg)"
                    }
               }
                              },
          Legend = new Legend
          {
              Layout = LegendLayout.Vertical,
              Align = LegendAlign.Right,
              VerticalAlign = LegendVerticalAlign.Middle
          },
          Series = new List<Series>
              {
                new ScatterSeries
                {
                    Name = "Observations",
                    Color = "black",
                    Data = ViewData["observationData"] as List<ScatterSeriesData>
                },
                new PolygonSeries
                {
                    Name = "Target",
                    Color = "rgba(124,181,236,0.5)",
                    Data = new List<PolygonSeriesData>
    {
                        new PolygonSeriesData { X = 153, Y = 42},
                        new PolygonSeriesData { X = 149, Y = 46},
                        new PolygonSeriesData { X = 149, Y = 55},
                        new PolygonSeriesData { X = 152, Y = 60},
                        new PolygonSeriesData { X = 159, Y = 70},
                        new PolygonSeriesData { X = 170, Y = 77},
                        new PolygonSeriesData { X = 180, Y = 70},
                        new PolygonSeriesData { X = 180, Y = 60},
                        new PolygonSeriesData { X = 173, Y = 52},
                        new PolygonSeriesData { X = 166, Y = 45}
                    }
                }
                              }
      };

    chartOptions.ID = "chart";
    var renderer = new HighchartsRenderer(chartOptions);
}

@Html.Raw(renderer.RenderHtml())
© 2023 Highcharts. All rights reserved.