Charts

Example

Code

Razor (cshtml, Razor)

<div class="row row-cols-1 row-cols-md-5 g-4">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="bar" _Data="BarChartData" />
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="doughnut" _Data="DoughnutChartData"></Chart>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="pie" _Data="PieChartData"></Chart>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="line" _Data="LineChartData"></Chart>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <Chart ChartType="polarArea" _Data="PolarAreaChartData"></Chart>
                </div>
            </div>
        </div>
    </div>

C#

private ChartData BarChartData = new();
    private ChartData DoughnutChartData = new();
    private ChartData PieChartData = new();
    private ChartData LineChartData = new();
    private ChartData PolarAreaChartData = new();

    protected override void OnInitialized()
    {
        CreateBarChartData();
        CreatePieChartData();
        CreateDoughnutChartData();
        CreateLineChartData();
        CreatePolarAreaChartData();
    }

    private void CreateBarChartData()
    {
        BarChartData.labels = new();
        BarChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.borderWidth = 1;
        dataSet.label = "Bar chart";
        dataSet.borderWidth = 1;
        dataSet.data = new();

        dataSet.data.Add(1);
        dataSet.data.Add(2);
        dataSet.data.Add(3);
        dataSet.data.Add(4);
        dataSet.data.Add(5);
        dataSet.data.Add(6);
        dataSet.data.Add(10.5f);
        BarChartData.labels.Add("Red");
        BarChartData.labels.Add("Blue");
        BarChartData.labels.Add("Yellow");
        BarChartData.labels.Add("Green");
        BarChartData.labels.Add("Purple");
        BarChartData.labels.Add("Orange");
        BarChartData.labels.Add("Float value");

        BarChartData.datasets.Add(dataSet);
    }


    private void CreateDoughnutChartData()
    {
        DoughnutChartData.labels = new();
        DoughnutChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.borderWidth = 1;
        dataSet.label = "Doughnut chart";

        dataSet.data = new();

        dataSet.data.Add(7);
        dataSet.data.Add(3);
        dataSet.data.Add(1);
        DoughnutChartData.labels.Add("New");
        DoughnutChartData.labels.Add("Old");
        DoughnutChartData.labels.Add("Not set");

        DoughnutChartData.datasets.Add(dataSet);
    }

    private void CreatePieChartData()
    {
        PieChartData.labels = new();
        PieChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.borderWidth = 1;
        dataSet.label = "Pie chart";

        dataSet.data = new();

        dataSet.data.Add(7);
        dataSet.data.Add(8);
        dataSet.data.Add(2);
        PieChartData.labels.Add("New");
        PieChartData.labels.Add("Old");
        PieChartData.labels.Add("Not set");

        PieChartData.datasets.Add(dataSet);
    }

    private void CreateLineChartData()
    {
        LineChartData.labels = new();
        LineChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.borderWidth = 1;
        dataSet.label = "Pie chart";
        dataSet.tension = 0.1f;
        dataSet.fill = false;
        dataSet.borderColor = "rgb(75, 192, 192)";

        dataSet.data = new();

        dataSet.data.Add(7);
        dataSet.data.Add(8);
        dataSet.data.Add(2);
        dataSet.data.Add(10);
        LineChartData.labels.Add("January");
        LineChartData.labels.Add("February");
        LineChartData.labels.Add("March");
        LineChartData.labels.Add("April");

        LineChartData.datasets.Add(dataSet);
    }

    private void CreatePolarAreaChartData()
    {
        PolarAreaChartData.labels = new();
        PolarAreaChartData.datasets = new();

        var dataSet = new Datasets();
        dataSet.label = "Polar Area chart";

        dataSet.data = new();

        dataSet.data.Add(7);
        dataSet.data.Add(8);
        dataSet.data.Add(2);
        dataSet.data.Add(10);
        dataSet.data.Add(10.4f);
        PolarAreaChartData.labels.Add("January");
        PolarAreaChartData.labels.Add("February");
        PolarAreaChartData.labels.Add("March");
        PolarAreaChartData.labels.Add("April");
        PolarAreaChartData.labels.Add("float value");

        PolarAreaChartData.datasets.Add(dataSet);
    }