Chart only contains outlines of rectangles.

[PWRDIST]

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]

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")