ASP .NET MVC Chart Helper Add Marker

Question

I have a column chart (Total Points per Region). I want to display the actual points on the top of the column. I believe this is called the marker? Here is my code:

var myChart = new Chart(width: 800, height: 500, theme: myTheme)
.AddTitle("Region Report")
.SetXAxis("Region")
.SetYAxis("Total Points")  
.AddSeries("RegionReport", chartType: "Column",
xValue: Model, xField: "Region",
yValues: Model, yFields: "TotalPoints")
.Write();

score 4 · Answer 1 · answered Jun 25 '12 at 22:59

If you want to show the marker top of your column value (or any data value) you would need to do it by creating a series first and then use IsValueShownAsLabel=true for specific series to show the value.

The way you have written the above controller function, you will not be able to show it because Chart Helper does not support it.

Here is a sample on how you can do it if you use Series. Add the following function to your controller:

    public ActionResult ShowChart()
    {
        Bitmap image = new Bitmap(500, 50);
        Graphics g = Graphics.FromImage(image);
        System.Web.UI.DataVisualization.Charting.Chart myChart = new System.Web.UI.DataVisualization.Charting.Chart();
        myChart.Width = 600;
        myChart.Height = 300;
        myChart.ChartAreas.Add("xSeries").BackColor = System.Drawing.Color.FromArgb(64, System.Drawing.Color.White);
        // create a couple of series  
        myChart.Series.Add("xSeries");
        // add points to xSeries  
        myChart.Series["xSeries"].Points.AddY(83);
        myChart.Series["xSeries"].Points.AddY(49);
        myChart.Series["xSeries"].Points.AddY(94);
        myChart.Series["xSeries"].Points.AddY(65);
        // add points to ySeries  
        myChart.Series["xSeries"].IsValueShownAsLabel = true;
        myChart.BackColor = Color.Transparent;
        MemoryStream imageStream = new MemoryStream();
        myChart.SaveImage(imageStream, ChartImageFormat.Png);
        myChart.TextAntiAliasingQuality = TextAntiAliasingQuality.SystemDefault;
        Response.ContentType = "image/png";
        imageStream.WriteTo(Response.OutputStream);
        g.Dispose();
        image.Dispose();
        return null;
    }

And then call it as below in your view:

<img src="@Url.Action("ShowChart")" alt="MyChart" />

The System.Web.UI.DataVisualization.Charting.Chart Chart has so much more functionality than the MVC Chart Helper. This is my preference as well due to the limited ability of the MVC helper. — Papa Burgundy, Aug 08 '12 at 16:53

ASP .NET MVC Chart Helper Add Marker

1 Answers1