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;

namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
    public partial class SharedController : Controller
    {
        public ActionResult BulletGraph()
        {
            return View();
        }

    }
}

Controller Code

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

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

@{ var chartOptions = new Highcharts
    {
        Chart = new Highsoft.Web.Mvc.Charts.Chart
        {
            Inverted = true,
            MarginLeft = 135,
            Type = ChartType.Bullet,
            MarginTop = 40,
            //MarginBottom = 40,
            Height = 150
        },
        Title = new Title
        {
            Text = "2017 YTD"
        },
        Legend = new Legend
        {
            Enabled = false
        },
        XAxis = new List<XAxis>
{
        new XAxis
        {
            Categories = new List<string> { "<span style=\"font-size:13px; font-weight:bold;\">Revenue</span><br/>U.S. $ (1,000s)" }
        }
    },
        YAxis = new List<YAxis>
{
        new YAxis
        {
            GridLineWidth = 0,
            PlotBands = new List<YAxisPlotBands>
{
                new YAxisPlotBands
                {
                    From = 0,
                    To = 150,
                    Color = "#666"
                },
                new YAxisPlotBands
                {
                    From = 150,
                    To = 225,
                    Color = "#999"
                },
                new YAxisPlotBands
                {
                    From = 225,
                    To = 9e9,
                    Color = "#bbb"
                }
            },
            Title = new YAxisTitle
            {
                //Enabled = false
            }
        }
    },
        PlotOptions = new PlotOptions
        {
            Series = new PlotOptionsSeries
            {
                Color = "#000"
            }
        },
        Credits = new Credits
        {
            Enabled = false
        },
        Exporting = new Exporting
        {
            Enabled = false
        },
        Series = new List<Series>
{
        new BulletSeries
        {
            Data = new List<BulletSeriesData>
{
                new BulletSeriesData
                {
                    Y = 275,
                    Target = 250
                }
            }
        }
    },
        Tooltip = new Tooltip
        {
            PointFormat = "<b>{point.y}</b> (with target at {point.target})"
        }
    };

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

@Html.Raw(renderer.RenderHtml())


@{ var chartOptions2 = new Highcharts
    {
        Chart = new Highsoft.Web.Mvc.Charts.Chart
        {
            Inverted = true,
            MarginLeft = 135,
            Type = ChartType.Bullet,
            Height = 120
        },
        Title = new Title
        {
            Text = null
        },
        Legend = new Legend
        {
            Enabled = false
        },
        XAxis = new List<XAxis>
{
            new XAxis
            {
                Categories = new List<string> { "<span style=\"font-size:13px; font-weight:bold;\">Profit</span><br/>%" }
            }
        },
        YAxis = new List<YAxis>
{
            new YAxis
            {
                GridLineWidth = 0,
                PlotBands = new List<YAxisPlotBands>
{
                    new YAxisPlotBands
                    {
                        From = 0,
                        To = 20,
                        Color = "#666"
                    },
                    new YAxisPlotBands
                    {
                        From = 20,
                        To = 25,
                        Color = "#999"
                    },
                    new YAxisPlotBands
                    {
                        From = 25,
                        To = 100,
                        Color = "#bbb"
                    }
                },
                Labels = new YAxisLabels
                {
                    Format = "{value}%"
                }
            },
        },
        PlotOptions = new PlotOptions
        {
            Series = new PlotOptionsSeries
            {
                Color = "#000"
            }
        },
        Credits = new Credits
        {
            Enabled = false
        },
        Exporting = new Exporting
        {
            Enabled = false
        },
        Series = new List<Series>
{
            new BulletSeries
            {
                Data = new List<BulletSeriesData>
{
                    new BulletSeriesData
                    {
                        Y = 22,
                        Target = 27
                    }
                }
            }
        },
        Tooltip = new Tooltip
        {
            PointFormat = "<b>{point.y}</b> (with target at {point.target})"
        }
    };

    chartOptions2.ID = "container2";
    var renderer2 = new HighchartsRenderer(chartOptions2);
}

@Html.Raw(renderer2.RenderHtml())

@{ var chartOptions3 = new Highcharts
    {
        Chart = new Highsoft.Web.Mvc.Charts.Chart
        {
            Inverted = true,
            MarginLeft = 135,
            Type = ChartType.Bullet,
            Height = 120
        },
        Title = new Title
        {
            Text = null
        },
        Legend = new Legend
        {
            Enabled = false
        },
        XAxis = new List<XAxis>
{
        new XAxis
        {
            Categories = new List<string> { "<span style=\"font-size:13px; font-weight:bold;\">New Customers</span><br/>Count" }
        }
    },
        YAxis = new List<YAxis>
{
        new YAxis
        {
            GridLineWidth = 0,
            PlotBands = new List<YAxisPlotBands>
{
                new YAxisPlotBands
                {
                    From = 0,
                    To = 1400,
                    Color = "#666"
                },
                new YAxisPlotBands
                {
                    From = 1400,
                    To = 2000,
                    Color = "#999"
                },
                new YAxisPlotBands
                {
                    From = 2000,
                    To = 9e9,
                    Color = "#bbb"
                }
            },
            Labels = new YAxisLabels
            {
                Format = "{value}"
            }
        }
    },
        PlotOptions = new PlotOptions
        {
            Series = new PlotOptionsSeries
            {
                Color = "#000"
            }
        },
        Credits = new Credits
        {
            Enabled = true
        },
        Exporting = new Exporting
        {
            Enabled = false
        },
        Series = new List<Series>
{
        new BulletSeries
        {
            Data = new List<BulletSeriesData>
{
                new BulletSeriesData
                {
                    Y = 1650,
                    Target = 2100
                }
            }
        }
    },
        Tooltip = new Tooltip
        {
            PointFormat = "<b>{point.y}</b> (with target at {point.target})"
        }
    };

    chartOptions3.ID = "container3";
    var renderer3 = new HighchartsRenderer(chartOptions3);
}

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