Telerik Forums
UI for ASP.NET Core Forum
1 answer
21 views

The chart legend property is not working at all for my chart using Razor syntax.  I'm using the latest version of Telerik.UI.for.AspNet.Core 2023.3.1114.

<chart-legend position="ChartLegendPosition.Top" visible="false" />

I'm trying to hide the legend and it still shows setting visible to false.  Also, the property position is not working.  No matter what I set it to the legend is on the bottom.

Here is the full code for the chart.

            <kendo-chart name="chartDeliveryOrder">
                <chart-area background="transparent"></chart-area>
                <category-axis>
                    <category-axis-item>
                        <labels font="16px 'Nunito Sans'" />
                        <major-grid-lines visible="false" />
                    </category-axis-item>
                </category-axis>
                <series>
                    <series-item type="ChartSeriesType.Column" category-field="DeliveryOrderNumber"
                                 field="SumTask1Through21Total" name="Tasks 1-21 Total" color="#1C355E" visible-in-legend="false" />
                </series>
                <value-axis>
                    <value-axis-item name="" type="numeric" min="0">
                        <labels format="C" font="16px 'Nunito Sans'" />
                        <line visible="false" />
                        <major-grid-lines visible="true" />
                    </value-axis-item>
                </value-axis>
                <datasource>
                    <transport>
                        <read type="post" url="@Url.Action("DeliveryOrderActualsSummaryChart", "Chart")" data="additionalInfo" />
                    </transport>
                </datasource>
                <chart-legend position="ChartLegendPosition.Top" visible="false" />
                <chart-title text="Delivery Order Summary" font="28px 'Nunito Sans, Bold'" />
                <tooltip visible="true" format="C" font="16px 'Nunito Sans'" />
            </kendo-chart>

Mihaela
Telerik team
 answered on 02 Feb 2024
1 answer
24 views

I have a column chart that has a default font of Arial. Is it possible to change this to the Inter font in one place or does the font have to be set for each individual label (e.g. chart title, axis title, axis label, legend, tooltip, etc.)?

Thanks,

Tim

Alexander
Telerik team
 answered on 09 Jan 2024
1 answer
20 views

I am using a Donut chart in my asp.net core application.

issue is that it is not showing the default loader while it fetch for data. on place of chart it looks blank space.

as it is not user friendly, please suggest me if i am missing something.

below is the code

@(
Html.Kendo().Chart<SampleProj.Models.Home.HomeChartViewModel>()
.Name("chart1")
.ChartArea(chartArea => chartArea.Background("transparent"))
.Legend(legend => legend.Position(ChartLegendPosition.Bottom))
.SeriesDefaults(series =>series.Donut().StartAngle(90))
.DataSource(ds => ds.Read(read => read.Action("GetApplicationByType", "Home")))
.Series(series =>
{
series.Donut(model => model.value, model => model.category)
.Name("Application Type")
.Labels(labels => labels
.Visible(true)
.Position(ChartSeriesLabelsPosition.OutsideEnd)
.Template("#= category #: \n #= value#%")
.Background("transparent")
)
.ColorField("color");
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= category # (#= series.name #): #= value #%")
.Format("{0}%")
)
)

 

Alexander
Telerik team
 answered on 07 Dec 2023
0 answers
52 views

How can I create a custom chart legend. Like this checkbox grid

Jairus
Top achievements
Rank 1
 asked on 17 Sep 2023
1 answer
27 views

Hi, I have the following graph:

I would like to keep the values in the left side but without showing the negative sign, because they represent quantities. I tried several things for formatting the ValueAxis in order to perform some sort of Math.abs operation but nothing works. Is it possible what I want to achieve?

Otherwise, I wouldn't mid not showing the value axis if I can show the absolutes quantities using label template. However, I get a lot of undefined values that I don't know how to remove:

 .Series(series =>
            {

            series.Bar(
                model => model.Quantity,
                categoryExpression: model => model.Price
            ).Labels(l => l.Visible(true).Template("#= customLabelFormat(value) #").Position(ChartBarLabelsPosition.OutsideEnd).Color("#RGBA"));
        })

 

 

 function customLabelFormat(value) {
           
             return Math.abs(value).toString();
 
        }

 

Thanks a lot.

 

Alexander
Telerik team
 answered on 29 Aug 2023
1 answer
45 views

I am looking for a sample of a responsive pie chart. I have tried different suggestions from the forums but none seem to work. Is there a fully worked sample I can reference?

Alexander
Telerik team
 answered on 25 Aug 2023
1 answer
188 views
I am not able to resize chart w.r.t. height and width. If I do so area is getting cut. 
Georgi Denchev
Telerik team
 updated answer on 25 Aug 2023
1 answer
17 views
currently i have a chart line and i have specified the color for each element in it from the store proc , but for some reason the lines connecting the timelines on the chart are different colors , only the The dot right at the landmark is the correct color I specified.
Here is my code

 @(Html.Kendo().Chart<Commsights.Data.DataTransferObject.DashbroadDataTransfer>()
                                                                .Name("LineChart_Customer_Processed")
                                                                .DataSource(dataSource => dataSource
                                                                .Read(read => read.Action("Chart_CountData_DaXuLyTolist", "Dashbroad").Data("FilterCompany"))
                                                                .Group(group => group.Add(model => model.CompanyName))
                                                                .Sort(sort => sort.Add(model => model.DatePublish).Ascending())
                                                                )
                                                                .Events(events => events.SeriesClick("onSeriesClick"))
                                                                .Theme("material")
                                                                .Series(series =>
                                                                {
                                                                    series.Line(model => model.ID_Count)
                                                                    .Name("#= group.value #")
                                                                    .Style(ChartSeriesStyle.Smooth)
                                                                    .CategoryField("DatePublish")
                                                                    .Tooltip(tooltip => tooltip
                                                                    .Visible(true)
                                                                    .Template("#= kendo.toString(category, 'MM/dd') # - #= value # (#= series.name # Article)"))
                                                                    .Width(3).Opacity(0.6)
                                                                   .ColorField("Color");
                                                                })
                                                                .Legend(legend => legend
                                                                .Position(ChartLegendPosition.Bottom)
                                                                )
                                                                .ValueAxis(axis => axis.Numeric()
                                                                .Labels(labels => labels
                                                                .Format("{0}")
                                                                .Skip(2)
                                                                .Step(2)
                                                                )
                                                                )
                                                                .CategoryAxis(axis => axis
                                                                .BaseUnit(ChartAxisBaseUnit.Days)
                                                                .Labels(labels => labels
                                                                .DateFormats(formats => formats.Months("MM/dd"))
                                                                .Rotation(-45)
                                                                )
                                                                )
                                                                .HtmlAttributes(new { style = "width: 100%; height: 400px;" })
                                                                )
Please help me!
Georgi Denchev
Telerik team
 answered on 23 Jun 2023
2 answers
66 views
here is my code 
@(Html.Kendo().Chart<Commsights.Data.DataTransferObject.DashbroadDataTransfer>()
                                                                .Name("LineChart_Customer_Processed")
                                                                .DataSource(dataSource => dataSource
                                                                .Read(read => read.Action("Chart_CountData_DaXuLyTolist", "Dashbroad").Data("FilterCompany"))
                                                                .Group(group => group.Add(model => model.CompanyName))
                                                                .Sort(sort => sort.Add(model => model.DatePublish).Ascending())
                                                                )
                                                                .Events(events => events.SeriesClick("onSeriesClick"))
                                                                .Theme("material")
                                                                .Series(series =>
                                                                {
                                                                    series.Line(model => model.ID_Count)
                                                                    .Name("#= group.value #")
                                                                    .Style(ChartSeriesStyle.Smooth)
                                                                    .CategoryField("DatePublish")
                                                                    .Tooltip(tooltip => tooltip
                                                                    .Visible(true)
                                                                    .Template("#= kendo.toString(category, 'MM/dd') # - #= value # (#= series.name # Article)"))
                                                                    .Width(3).Opacity(0.6)
                                                                   .ColorField("Color");
                                                                })
                                                                .Legend(legend => legend
                                                                .Position(ChartLegendPosition.Bottom)
                                                                )
                                                                .ValueAxis(axis => axis.Numeric()
                                                                .Labels(labels => labels
                                                                .Format("{0}")
                                                                .Skip(2)
                                                                .Step(2)
                                                                )
                                                                )
                                                                .CategoryAxis(axis => axis
                                                                .BaseUnit(ChartAxisBaseUnit.Days)
                                                                .Labels(labels => labels
                                                                .DateFormats(formats => formats.Months("MM/dd"))
                                                                .Rotation(-45)
                                                                )
                                                                )
                                                                .HtmlAttributes(new { style = "width: 100%; height: 400px;" })
                                                                )

I used colorfield() to specify the color of the elements on the chart but I don't understand why the dots at the landmarks are the correct color I specified to load from the store proc, but the lines connect them together wrong color.
Pls help me.
Alexander
Telerik team
 answered on 22 Jun 2023
1 answer
144 views

I would like to create the following type of chart:

I have set the BaseUnit to weeks but the label prints as 10/31, 11/7, 11/14 etc

   @(Html.Kendo().Chart<FlightLog.Models.Charts.HoursByWeek>()
        .Name("chart")
        .Theme("bootstrap")
        .Title("Monthly Hours")
        .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
        )
        .DataSource(ds => ds
        .Read(r => r.Url(Url.Page("./DashBoard", "HoursPerWeek")).Type(HttpVerbs.Post))
        )
        .Series(series =>
        {
            series.Column(model => model.Hours).CategoryField("Date");
        })
        .CategoryAxis(axis => axis.Date()
        .Labels(labels => labels.Rotation(-45))
        .Labels(labels => labels.DateFormats(dateFormat => dateFormat.Months("MMM")))
        .BaseUnit(ChartAxisBaseUnit.Weeks)

        .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
        .MajorGridLines(lines => lines.Visible(true))
        )
        )

Mihaela
Telerik team
 answered on 24 May 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?