Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/mariusmuntean/ChartJs.Blazor/issues/133 below:

Creation of mixed charts should be possible also in version 2.0.0 · Issue #133 · mariusmuntean/ChartJs.Blazor · GitHub

It should be possible to create mixed charts that are a combination of two or more different chart types. E.g. see a code, which works with ChartJs.Blazor version 1.1.0, below

• Client-Side
• Server-Side

Please provide full code examples below where possible to make it easier for the developers to check your issues.

@using System.Drawing
@using ChartJs.Blazor.ChartJS.BarChart
@using ChartJs.Blazor.ChartJS.BarChart.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes.Ticks
@using ChartJs.Blazor.ChartJS.Common.Enums
@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.ChartJS.Common.Wrappers
@using ChartJs.Blazor.ChartJS.LineChart
@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.Util

<h2>Simple Bar Chart</h2>
<div class="row">
    <button class="btn btn-primary" @onclick="AddData">
        Add Data
    </button>
    <button class="btn btn-primary" @onclick="RemoveData">
        Remove Data
    </button>
</div>
<ChartJsBarChart @ref="_barChart"
                 Config="@_barChartConfig"
                 Width="600"
                 Height="300" />

@code
{

    private BarConfig _barChartConfig;
    private ChartJsBarChart _barChart;
    private BarDataset<DoubleWrapper> _barDataSet;

    protected override void OnInitialized()
    {
        _barChartConfig = new BarConfig
        {
            Options = new BarOptions
            {
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "Simple Bar Chart"
                },
                Scales = new BarScales
                {
                    XAxes = new List<CartesianAxis>
                    {
                        new BarCategoryAxis
                        {
                            BarPercentage = 0.5,
                            BarThickness = BarThickness.Flex
                        }
                    },
                    YAxes = new List<CartesianAxis>
                    {
                        new BarLinearCartesianAxis
                        {
                            Ticks = new LinearCartesianTicks
                            {
                                BeginAtZero = true
                            }
                        }
                    }
                }
            }
        };

        _barChartConfig.Data.Labels.AddRange(new[] { "A", "B", "C", "D" });

        _barDataSet = new BarDataset<DoubleWrapper>
        {
            Label = "My double dataset",
            BackgroundColor = new[] { ColorUtil.RandomColorString(), ColorUtil.RandomColorString(), ColorUtil.RandomColorString(), ColorUtil.RandomColorString() },
            BorderWidth = 0,
            HoverBackgroundColor = ColorUtil.RandomColorString(),
            HoverBorderColor = ColorUtil.RandomColorString(),
            HoverBorderWidth = 1,
            BorderColor = "#ffffff"
        };

        _barDataSet.AddRange(new double[] { 8, 5, 3, 7 }.Wrap());
        _barChartConfig.Data.Datasets.Add(_barDataSet);

        var lineSet = new LineDataset<ChartJs.Blazor.ChartJS.Common.Point>
        {
            Label = "Line",
            Hidden = false,
            BackgroundColor = ColorUtil.FromDrawingColor(Color.DimGray),
            BorderColor = ColorUtil.FromDrawingColor(Color.DimGray),
            BorderCapStyle = BorderCapStyle.Square,
            BorderJoinStyle = BorderJoinStyle.Bevel,
            Fill = false,
            PointBackgroundColor = ColorUtil.FromDrawingColor(Color.Black),
            BorderWidth = 1,
            PointBorderWidth = 1,
            PointRadius = 3,
            SteppedLine = SteppedLine.False
        };

        lineSet.AddRange(new List<ChartJs.Blazor.ChartJS.Common.Point> ()
        {
            new ChartJs.Blazor.ChartJS.Common.Point(0, 7),
            new ChartJs.Blazor.ChartJS.Common.Point(1, 3),
            new ChartJs.Blazor.ChartJS.Common.Point(2, 2),
            new ChartJs.Blazor.ChartJS.Common.Point(3, 5),

        } );

        _barChartConfig.Data.Datasets.Add(lineSet);
    }

    private async Task AddData()
    {
        var nowSecond = DateTime.Now.Second;
        _barChartConfig.Data.Labels.Add(nowSecond.ToString());
        _barDataSet.Add(new DoubleWrapper(nowSecond));

        await _barChart.Update();
    }

    private async Task RemoveData()
    {
        if (_barChartConfig.Data.Labels.Count > 0)
        {
            _barChartConfig.Data.Labels.RemoveAt(_barChartConfig.Data.Labels.Count - 1);
        }

        if (_barDataSet.Data.Count > 0)
        {
            _barDataSet.RemoveAt(_barDataSet.Data.Count - 1);
        }

        await _barChart.Update();
    }
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4