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

I have a simple test page that has a Chart and a PDF Viewer. I can not get both to work at the same time without getting a license error.

Below is how I  have tried loading the Kendo library at the top of the page. For the chart, I need to load it as a script for it to work. For the PDF Viewer I need to load it as a module. But loading both always breaks the license. I have tried version combinations (see below) 

How do I get a chart on the same page as the PDF Viewer and have the license work?

Scenario 1:

<script src="~/Portal/kendo/kendo.all.min.js" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" ></script>

  • Chart loads correctly
  • PDF Viewer fails to load
  • The license loads correctly

 Scenario 2:

<script src="~/Portal/kendo/kendo.all.min.js" type="module" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" type="module" ></script>

  • Chart fails to load
  • PDF Viewer loads correctly
  • The license loads correctly

Scenario 3:

<script src="~/Portal/kendo/kendo.all.min.js" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" ></script>

<script src="~/Portal/kendo/kendo.all.min.js" type="module" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" type="module" ></script>

  • Chart loads correctly
  • PDF Viewer loads correctly
  • The license fails to load

 

Thanks,

Richard

Eyup
Telerik team
 answered on 08 Jul 2025
1 answer
11 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
37 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
80 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
124 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
152 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
142 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
142 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
143 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
97 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?