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

I need to add charts to a project that doesn't have any. To learn about the Kendo chart control I added sample code to an existing view in the project.  My guess is that the problem has to do with the CSS and JavaScript files that the project uses. Projects that I've downloaded that have chart code that works use Bootstrap 3 and Bootstrap 4 while our project uses Bootstrap 5.

This is the code:

<div class="chart-wrapper">

    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Site Visitors Stats /thousands/")
        .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
        )
        .SeriesDefaults(seriesDefaults => seriesDefaults
        .Column().Stack(true)
        )
        .Series(series =>
        {
            series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
            series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
        })
        .CategoryAxis(axis => axis
        .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
        .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}")
        )
        )
</div>

 

PWRDIST
Top achievements
Rank 1
Iron
 answered on 11 Jun 2025
1 answer
33 views

Hy,

I have the following graph that displays the values ​​when I hover over the column with the mouse:

With the "PDF Export" button highlighted in yellow I export the graph to PDF using the chart API: https://demos.telerik.com/aspnet-core/chart-api/pdf-export

Attached you can find the export in pdf that is created.

How can I display the values ​​of the two series in the pdf file?

Thanks for any help

Eyup
Telerik team
 answered on 04 Apr 2025
1 answer
71 views

I need to display a dataset of a scanned item where the dataset is a list of 3D values (X, Y and Z)
I want the diagram to display the Image as be a top-down view, using X and Y coordinates from the dataset using the  the height (Z) to color encode the point using a color gradient.

Using a 3D RadCartesianChart3D component I have created something similar, see the attached RadCartesianChar3D image. 
What I need now is a 2D image, something like what I try to illustrate in the attached ColorEncodedItem image.

What I need to know, is what component I should use for this job. 
I expect that using a RadCartesianChart3D will be to CPU intensive for the platform I will be running this software on + I don't know, how to make a top-down view of a diagram using this component

 
Mihaela
Telerik team
 answered on 01 Aug 2024
1 answer
105 views

We are looking to display total number in donut chart.

Is it possible?

Number display in the center should display total when we do not mouse hover over any section of donut.

But if hover over any section, it should show that particular number in center. Look at image below.

Anton Mironov
Telerik team
 answered on 20 Jun 2024
1 answer
144 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
135 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
136 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
140 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
94 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
123 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?