How to change the theme of the chart?

Mar 7, 2012 at 4:39 PM

Hi,

 

I'm confused on how I can set properties of the HighCharts.theme, like the colors of the slice and the background color outside the pie, with your wrapper.

The sample project uses the default slice colors and the white background.

 

Thanks.

 

Sylvain

Coordinator
Mar 7, 2012 at 11:57 PM

Hi Sylvain,

One way to setup/change the theme is from client size as is used in Highcharts demos: http://www.highcharts.com/demo/line-basic/gray

If you want to create the theme on the server you need to specify every field like in this js file: http://www.highcharts.com/js/themes/gray.js

Here is the code:

Highcharts chart = new Highcharts("chart")
                .SetOptions(new GlobalOptions
                            {
                                Colors = new[]
                                         {
                                             ColorTranslator.FromHtml("#DDDF0D"),
                                             ColorTranslator.FromHtml("#7798BF"),
                                             ColorTranslator.FromHtml("#55BF3B"),
                                             ColorTranslator.FromHtml("#DF5353"),
                                             ColorTranslator.FromHtml("#DDDF0D"),
                                             ColorTranslator.FromHtml("#aaeeee"),
                                             ColorTranslator.FromHtml("#ff0066"),
                                             ColorTranslator.FromHtml("#eeaaee")

                                         }
                            })
                .InitChart(new Chart
                           {
                               BorderWidth = 0,
                               BorderRadius = 15,
                               PlotBackgroundColor = null,
                               PlotShadow = false,
                               PlotBorderWidth = 0,
                               BackgroundColor = new BackColorOrGradient(new Gradient
                                                                         {
                                                                             LinearGradient = new[] { 0, 0, 0, 400 },
                                                                             Stops = new object[,]
                                                                                     {
                                                                                         { 0, Color.FromArgb(255, 96, 96, 96) },
                                                                                         { 1, Color.FromArgb(255, 16, 16, 16) }
                                                                                     }
                                                                         })
                           })
                .SetTitle(new Title
                          {
                              Text = "Gray Theme",
                              Style = "color: '#FFF', font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'"
                          })
                .SetSubtitle(new Subtitle { Style = "color: '#DDD', font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'" })
                .SetXAxis(new XAxis
                          {
                              GridLineWidth = 0,
                              LineColor = ColorTranslator.FromHtml("#999"),
                              TickColor = ColorTranslator.FromHtml("#999"),
                              Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" },
                              Labels = new XAxisLabels { Style = "color: '#999', fontWeight: 'bold'" },
                              Title = new XAxisTitle { Style = "color: '#AAA', font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'" }
                          })
                .SetYAxis(new YAxis
                          {
                              AlternateGridColor = null,
                              MinorTickInterval = null,
                              GridLineColor = Color.FromArgb(255, 255, 255, 255),
                              LineWidth = 0,
                              TickWidth = 0,
                              Labels = new YAxisLabels { Style = "color: '#999',fontWeight: 'bold'" },
                              Title = new YAxisTitle { Style = "color: '#AAA',font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'" }
                          })
                .SetLegend(new Legend
                           {
                               ItemStyle = "color: '#CCC'",
                               ItemHoverStyle = "color: '#FFF'",
                               ItemHiddenStyle = "color: '#333'"
                           })
                .SetLabels(new Labels { Style = "color: '#CCC'" })
                .SetTooltip(new Tooltip
                            {
                                BorderWidth = 0,
                                Style = "color: '#FFF'",
                                BackgroundColor = new BackColorOrGradient(new Gradient
                                                                          {
                                                                              LinearGradient = new[] { 0, 0, 0, 50 },
                                                                              Stops = new object[,]
                                                                                      {
                                                                                          { 0, Color.FromArgb(200, 96, 96, 96) },
                                                                                          { 1, Color.FromArgb(200, 16, 16, 16) }
                                                                                      }
                                                                          })
                            })
                .SetPlotOptions(new PlotOptions
                                {
                                    Line = new PlotOptionsLine
                                    {
                                        DataLabels = new PlotOptionsLineDataLabels { Color = ColorTranslator.FromHtml("#CCC") },
                                        Marker = new PlotOptionsLineMarker { LineColor = ColorTranslator.FromHtml("#333") }
                                    },
                                    Spline = new PlotOptionsSpline { Marker = new PlotOptionsSplineMarker { LineColor = ColorTranslator.FromHtml("#333") } },
                                    Scatter = new PlotOptionsScatter { Marker = new PlotOptionsScatterMarker { LineColor = ColorTranslator.FromHtml("#333") } }
                                })
                .SetNavigation(new Navigation
                               {
                                   ButtonOptions = new NavigationButtonOptions
                                                   {
                                                       BorderColor = ColorTranslator.FromHtml("#000000"),
                                                       SymbolStroke = ColorTranslator.FromHtml("#C0C0C0"),
                                                       HoverSymbolStroke = ColorTranslator.FromHtml("#FFFFFF"),
                                                       BackgroundColor = new BackColorOrGradient(new Gradient
                                                       {
                                                           LinearGradient = new[] { 0, 0, 0, 20 },
                                                           Stops = new object[,]
                                                                                      {
                                                                                          { 0.4, ColorTranslator.FromHtml("#606060") },
                                                                                          { 0.6, ColorTranslator.FromHtml("#333333") }
                                                                                      }
                                                       })
                                                   }
                               })
                .SetExporting(new Exporting
                              {
                                  Buttons = new ExportingButtons
                                            {
                                                ExportButton = new ExportingButtonsExportButton{ SymbolFill = ColorTranslator.FromHtml("#55BE3B") },
                                                PrintButton = new ExportingButtonsPrintButton { SymbolFill = ColorTranslator.FromHtml("#7797BE") }
                                            }
                              })
                .SetSeries(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 })
                           });

Did I answer your question?

Vangi

Mar 8, 2012 at 2:22 PM

Hi Vangi,

 

I'll test and let you know but i think this is exactly what i was looking for.

 

Thanks much;

Mar 8, 2012 at 7:54 PM

Hi Vangi,

I get an "Not implemented serialization array of type: System.Drawing.Color[]" in the GetJsonArray method, when passing the Colors array in the options.  

Mar 8, 2012 at 9:37 PM

Vangi,

I added this to the GetJsonArray and it works.

if (obj is System.Drawing.Color[])                return string.Format(useCurlyBracketsForObject ? JSON_NUMBER_ARRAY : JSON_DEFAULT_FORMAT, String.Join(", ", from Color item in obj select GetColorString(JSON_STRING_FORMAT, item)));          

Coordinator
Mar 9, 2012 at 7:25 PM

Hi Sylvain,

Thank you for sharing your solution. It will be included into the next release.

Vangi

Marked as answer by Vangi on 10/24/2013 at 2:53 AM
Coordinator
Mar 10, 2012 at 12:09 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.