Search code examples
c#asp.netchartshighchartsdotnethighcharts

How to draw a Horizontal line using Highcharts DotNet C#

I was wondering how it would be possible to draw a solid horizontal line using the Highcharts framework.
Purpose: The purpose for these lines is that I want to have constraints at a certain value.
Extra Information:

  1. Technology: ASP.NET MVC3, Highcharts DotNet C# Framework
  2. Framework I am using: http://dotnethighcharts.codeplex.com/

Example:
enter image description here

This is an example of what I kind of want, except the red and green lines will be control lines. I do not want to red and green lines to have points, but to be a solid line.

Current Code of how I generated the graph above

        Highcharts chart = new Highcharts("chart");
        chart.SetXAxis(new XAxis
        {
            Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
        });
        chart.SetSeries(new[]{
            new Series
            {
                Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
            },
            new Series
            {
                Data = new Data(new object[] { 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250 })
            },
            new Series
            {
                Data = new Data(new object[] { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 })
            }

        });

Thank you for the help, please let me know if there is any misunderstanding in the question.

Solution

  • What you are looking for is called plot-line here is the example for it

    http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/yaxis-plotlines/

    .SetYAxis(new YAxis
                  {
                      Title = new XAxisTitle { Text = "" },
                      PlotLines = new[]
                                  {
                      new XAxisPlotLines
                       {
                        value : 0,
                        color : 'green',
                        dashStyle : 'shortdash',
                        width : 2,
                        label : {
                        text : ''
                                 }
                          }
                       new XAxisPlotLines
                                      {
                        value : 250,
                        color : 'red',
                        dashStyle : 'shortdash',
                        width : 2,
                        label : {
                         text : ''
                                       }
                                      }
                                  }
                  })