Customizing ASP.NET Razor Charts

I’ve been working with charts in ASP.NET Razor Web pages. The documentation on how to customize charts is a bit thin. In particular I wanted to put two y-values (aka series) for every x-value, modify the default colors of the graph columns and points, and use a line with points rather than just a line or just points.

My demo reads a comma-delimited data file that has an x-value followed by two y values. The first y-value is displayed as a gold column. The second y-value is displayed as a red line with red markers.


Creating an ASP.NET Razor Chart custom theme boils down to creating one huge XML string. Built-in themes have names like “Blue”. A custom theme allowed me to change the colors of the y-series data. Adding multiple series with the AddSeries method was the key to multiple y-series. Simply adding a Line series and a Point series with the same data was the trick to make a line-with-points.


The hardest part was figuring out the syntax for the PaletteCustomColors attribute in the code. In my demo, I used


The first color (FFD700 = gold), is for the first y-series (the columns), the second and third colors (both FF0000 = red), are for the line and points.

I’ve only just scratched the surface of ASP.NET Razor charts. I can tell it would take weeks to really understand all the details, but for now, I can make some graphs with non-default styling.

This entry was posted in Miscellaneous. Bookmark the permalink.