This is a migrated thread and some comments may be shown as answers.

Change CSS of bar chart

4 Answers 455 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Chili
Top achievements
Rank 1
Chili asked on 14 Sep 2018, 09:37 AM

Hello,

I am trying to give ALL my text in my bar chart a different font-size. Now when I want to put it in my own CSS. I have NO CLUE, what classes or something I need to use. I have the following classes (Yes, there is more code below and the graph shows up).: 

<div class="demo-section k-content wide">
                @(Html.Kendo().Chart<[private].Models.[private]>()
                        .Name("Samples_rapport")

By going in my chrome inspector I can do this to change all the font sizing:
text {
font-size: 9px !important;
}

 

Please, update the Asp.net core documentation....
Greetz,

Chili

4 Answers, 1 is accepted

Sort by
0
Chili
Top achievements
Rank 1
answered on 14 Sep 2018, 10:08 AM

Another question: How can I add a majorUnit to my x-axis? So it will be: (bar+date, bar, bar+date) (the date represents the x-axis).
My code: 

.SeriesDefaults(seriesDefaults =>
                seriesDefaults.Column().Stack(true)
                )
                .DataSource(ds => ds.Read(read => read.Action("[private]", "Home")))
                .Series(series =>
                {
                    series.Column(Model => Model.[private]).Name("Uknown").Color("yellow");
                    series.Column(Model => Model.[private]).Name("Pos").Color("red");
                    series.Column(Model => Model.[private]).Name("Neg").Color("green")
                    .Labels(labels => labels.Background("transparent").Visible(true).Template("#= stackValue #"));
                })
                .CategoryAxis(axis => axis
                .Title(title => title.Text("Maand"))
                        
                .Date()
                .Labels(labels => labels.Format("{0:MMM yyyy}").Rotation(-45))
                .Categories(Model => Model.DatumSR)
                        
                .MajorGridLines(lines => lines.Visible(false))
                        
                )
                .ValueAxis(axis => axis
                .Numeric()
                .Title(title => title.Text("Aantal"))
                .Labels(labels => labels.Format("{0}"))
                .Max(12)
                .Line(line => line.Visible(true))
                .MajorGridLines(lines => lines.Visible(false))
                        
                )
                .Tooltip(tooltip => tooltip
                .Visible(true)
                .Template("#= series.name #: #= value #")
                )
                )

Greetz.

0
Chili
Top achievements
Rank 1
answered on 14 Sep 2018, 10:36 AM
I have fixed question no. 1 already, 
0
Chili
Top achievements
Rank 1
answered on 14 Sep 2018, 12:58 PM

Ive fixed both of my questions.

Now I am facing a 3rd issue. 

In my attachment.  You can see that the title is positioned on the Y-axis. But I want to center it (so I will be in the center of the graph).I have been using some demo code to 'fix' it but it wont help. This is the code:
.Title(title => title
                .Text("Results")
                .Align(ChartTextAlignment.Center)
                )

Hopefully someone can help me with this one.

Greetzzz

0
Alex Hajigeorgieva
Telerik team
answered on 19 Sep 2018, 11:27 AM
Hi, Chili,

I am pleased to see that you have found the answers to your original questions.

The Kendo UI Chart for ASP.NET Core title is centred by default. The provided snippet declaration is correct and in line with the documentation:

https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI.Fluent/ChartTitleSettingsBuilder#kendomvcuifluentcharttitlesettingsbuilder

Could there be anything else that may have affected the title? Some custom code or CSS?

If you provide the Chart and Model definition I will be able to create a test project that simulates your exact configuration in the best possible way and give you concrete suggestions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart
Asked by
Chili
Top achievements
Rank 1
Answers by
Chili
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or