bhvaikkp
Posts: 2
Joined: Mon Apr 18, 2022 6:57 am

to change the color of Chart title & x-Y axis and Legends or series names

Hii

I am using DotNet Highcharts 4.0 version as a MVC project for developing charts.
Can any one help me to change the color of the following:
1. X-Y Axis lables and title
2. Titl2 of charts
3. series name
As per image attachedbelow
[img]C:\Users\Admin\Desktop\chartsample.png[/img]
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: to change the color of Chart title & x-Y axis and Legends or series names

Hello bhvaikkp,

Welcome to our forum and thanks for contacting us with your question!

Unfortunately, the image is not showing.

In your SetTitle() function you can pass style as follows :

Example code:

Code: Select all

  .SetTitle(new Title { Text = "Series Wins", Style = "color : 'red'" }).

You can do the same analogical to other chart's elements.

API Reference:
1. https://dotnet.highcharts.com/Help/High ... bbbd43d84a
https://dotnet.highcharts.com/Help/High ... f54150d127
2. https://dotnet.highcharts.com/Help/High ... d97f031151
3. I'm not sure this one, do you want to change series name in legend?
https://dotnet.highcharts.com/Help/High ... 11e590d76b

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
bhvaikkp
Posts: 2
Joined: Mon Apr 18, 2022 6:57 am

Re: to change the color of Chart title & x-Y axis and Legends or series names

hii,
Tks for reply, it works for me!!

I have one more issue of stacking column with adding series of chart type lines, but the stacking column series is visible on chart until I add new lines series.
can anyone guide me what should be done if I want to add 2 column series with 3-line series with column to be stacked.

attached is error with inspect page
error while adding diff chart type.png
error while adding diff chart type.png (44.77 KiB) Viewed 689 times

also file page without addition of chart type line
page with column stacked.png
page with column stacked.png (57.32 KiB) Viewed 689 times

Code: Select all

columnChart.InitChart(new Chart()
            {
                Type = DotNet.Highcharts.Enums.ChartTypes.Column,
                Style = "fontWeight: 'bold', fontSize: '17px'",
                DefaultSeriesType = ChartTypes.Column,
                Width = 1100,
                Height = 400,
                BackgroundColor = new BackColorOrGradient(System.Drawing.Color.FromArgb(27, 35, 67)),
                BorderColor = System.Drawing.Color.FromArgb(27, 35, 67),
                BorderRadius = 0,
                BorderWidth = 2,

            });
            columnChart.SetXAxis(new XAxis()
            {
                Type = AxisTypes.Category,
                GridLineColor = System.Drawing.Color.FromArgb(55, 96, 146),//#376092
                Labels = new XAxisLabels { Rotation = 45, Style = "color:'white' ,fontWeight: 'normal'" },
                Title = new XAxisTitle() { Text = "Secured Site Activity 16 - Week Forecast", Style = "fontWeight: 'bold', fontSize: '17px'" },
                Categories = new string[] { GlobalCV.celldate.GetValue(1, 1).ToString(), GlobalCV.celldate.GetValue(2, 1).ToString(), GlobalCV.celldate.GetValue(3, 1).ToString(), GlobalCV.celldate.GetValue(4, 1).ToString(), GlobalCV.celldate.GetValue(5, 1).ToString(), GlobalCV.celldate.GetValue(6, 1).ToString(), GlobalCV.celldate.GetValue(7, 1).ToString(), GlobalCV.celldate.GetValue(8, 1).ToString(), GlobalCV.celldate.GetValue(9, 1).ToString(), GlobalCV.celldate.GetValue(10, 1).ToString(), GlobalCV.celldate.GetValue(11, 1).ToString(), GlobalCV.celldate.GetValue(12, 1).ToString(), GlobalCV.celldate.GetValue(13, 1).ToString(), GlobalCV.celldate.GetValue(14, 1).ToString(), GlobalCV.celldate.GetValue(15, 1).ToString(), GlobalCV.celldate.GetValue(16, 1).ToString(), GlobalCV.celldate.GetValue(17, 1).ToString() }
            });
            columnChart.SetYAxis(new YAxis()
            {

                Title = new YAxisTitle()
                {

                    Text = "No of Operatives",
                    Style = "color:'white',fontWeight: 'normal'",
                },

                ShowFirstLabel = true,
                ShowLastLabel = true,
                Min = 0
            });
            columnChart.SetLegend(new Legend
            {
                Enabled = true,
                Align = HorizontalAligns.Right,
                ItemStyle = "color:'white' ,fontWeight: 'normal'",
                VerticalAlign = VerticalAligns.Top,
                Y = 200,
                Layout = Layouts.Vertical
            });
            columnChart.SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Stacking = Stackings.Normal, Grouping = true } });
            dValue = (object)(GlobalCV.DEmp); dValue1 = (object)(GlobalCV.BudgetTarget);
            dCValue = (object)(GlobalCV.BudgetTarget + GlobalCV.CBudgetTarget);
            columnChart.SetSeries(new Series[]
                {
                     new Series{

                    Name = "Actual Concrete Works",
                    Color = Color.FromArgb(131,130,134),// #3E80C1
                    Data = new Data( new [] { GlobalCV.cellCopdata.GetValue(1),GlobalCV.cellCopdata.GetValue(2),GlobalCV.cellCopdata.GetValue(3),GlobalCV.cellCopdata.GetValue(4),GlobalCV.cellCopdata.GetValue(5),GlobalCV.cellCopdata.GetValue(6),GlobalCV.cellCopdata.GetValue(7),GlobalCV.cellCopdata.GetValue(8),GlobalCV.cellCopdata.GetValue(9),GlobalCV.cellCopdata.GetValue(10),GlobalCV.cellCopdata.GetValue(11),GlobalCV.cellCopdata.GetValue(12),GlobalCV.cellCopdata.GetValue(13),GlobalCV.cellCopdata.GetValue(14),GlobalCV.cellCopdata.GetValue(15),GlobalCV.cellCopdata.GetValue(16),GlobalCV.cellCopdata.GetValue(17) })
                },
                new Series{

                    Name = "Actual Deck Works",
                    Color = Color.FromArgb(62,128,193),// #3E80C1
                    Data = new Data( new [] { GlobalCV.cellopdata.GetValue(1,1),GlobalCV.cellopdata.GetValue(2,1),GlobalCV.cellopdata.GetValue(3,1),GlobalCV.cellopdata.GetValue(4,1),GlobalCV.cellopdata.GetValue(5,1),GlobalCV.cellopdata.GetValue(6,1),GlobalCV.cellopdata.GetValue(7,1),GlobalCV.cellopdata.GetValue(8,1),GlobalCV.cellopdata.GetValue(9,1),GlobalCV.cellopdata.GetValue(10,1),GlobalCV.cellopdata.GetValue(11,1),GlobalCV.cellopdata.GetValue(12,1),GlobalCV.cellopdata.GetValue(13,1),GlobalCV.cellopdata.GetValue(14,1),GlobalCV.cellopdata.GetValue(15,1),GlobalCV.cellopdata.GetValue(16,1),GlobalCV.cellopdata.GetValue(17,1) })
                },
               
                 new Series{

                    Name = "Deck & Concrete Target",
                     Type =ChartTypes.Line,
                    Color = Color.FromArgb(131,130,134),// #FFCD1C
                    Data = new Data( new [] { dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue, dCValue }),
                },
                    new Series{

                    Name = "Deck Target",
                     Type =ChartTypes.Line,
                    Color = Color.FromArgb(255,205,28),// #FFCD1C
                    Data = new Data( new [] { dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue, dValue }),
                },
                new Series{

                    Name = "Directly Employed Operatives",
                    Type =ChartTypes.Line,
                    Color = Color.FromArgb(146,208,80),//  "#92D050",
                    Data = new Data( new [] { dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1, dValue1 }),
                },
                }
                );
           
Above code is not working as I merge two types of series: stacked column and line.

Help & rectify were I am wrong!!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: to change the color of Chart title & x-Y axis and Legends or series names

Hello bhvaikkp,

Referring to an error in your console, this is description of this error:
Highcharts already defined in the page
This error happens if the Highcharts namespace already exists when loading Highcharts or Highstock.

This is caused by including Highcharts or Highstock more than once.

Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if using the Chart and StockChart constructors in combination, only the highstock.js file is required.
Please check if you have included Highcharts or Highstock more than once.

Referring to your question about using column type and line type on one chart I have a question. Are you using our official wrapper Highsoft.Highcharts?
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”