Chart only contains outlines of rectangles.

1 Answer 5 Views
Chart
PWRDIST
Top achievements
Rank 1
Iron
PWRDIST asked on 10 Jun 2025, 01:44 AM

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>

 

1 Answer, 1 is accepted

Sort by
0
PWRDIST
Top achievements
Rank 1
Iron
answered on 11 Jun 2025, 05:14 PM

I found a solution to this problem. I included a theme as shown below the HTML generated included everything that should be included in the chart.

 

    @(Html.Kendo().Chart()
        .Name("chart")
        .Theme("blueOpal")

 

 

Tags
Chart
Asked by
PWRDIST
Top achievements
Rank 1
Iron
Answers by
PWRDIST
Top achievements
Rank 1
Iron
Share this question
or