Blazor.C3jsChart

C3js component for Blazor. I like a lof of the C3js, but the options to use a c# code with the front-end is something that call me attention. So I write this commponent that is more expressive and easy to use.

Usage

Dataset via markup sintaxe

 <Chart TItem="double"
        Title="Pesquisas online"
        Type="ChartType.Pie">
   <ChartDataset Name="Acesso Mercado Livre" Datasource="datasourceAcessoML" />
   <ChartDataset Name="Acesso Bondfaro" Datasource="datasourceAcessoBf" />
   <ChartDataset Name="Acesso Buscape" Datasource="datasourceAcessoBP" />
   <ChartDataset Name="Acesso Zoom" Datasource="datasourceAcessoZoom" />
 </Chart>

@code {
  IList<double> datasourceAcessoML = new List<double> { 10500 };
  IList<double> datasourceAcessoBf = new List<double> { 3000 };
  IList<double> datasourceAcessoBP = new List<double> { 5000 };
  IList<double> datasourceAcessoZoom = new List<double> { 18000 };
}

The graphics generated by this code

Dataset via code

 <Chart @ref="chart" TItem="double"
        Title="Pesquisas online"
        Type="ChartType.Pie"/>

@code {
  IList<double> datasourceAcessoML = new List<double> { 10500 };
  IList<double> datasourceAcessoBf = new List<double> { 3000 };
  IList<double> datasourceAcessoBP = new List<double> { 5000 };
  IList<double> datasourceAcessoZoom = new List<double> { 18000 };
  
  //reference to the object Chart
  Chart chart;
  
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
       chart.AddDataset(new DataSet<double>
       {
           Name = "Acesso Mercado Livre",
           Datasouce = datasourceAcessoML  
        );
        
        //other way to do the same
        chart.AddDataset(chart.CreateDataset("Acesso Bondfaro", 3000));
        //or
        var buscarPeDataset = chart.CreateDataset("Acesso Buscape", 5000)
        chart.AddDataset(buscaPeDataset);
  }
}

Like you can see Chart library is very versatil, and you can work in the way that is better for you.

Install

Use a Nuget package to install in your project

Install-Package Rrs.Blazor.C3js.Chart

Setting your project

In the _imports.razor add:

@using Blazor.C3js.Chart

In the _host.cshtml Blazor Server or index.cshtml for WebAssembly in the head section of the html

<link href="_content/Rrs.Blazor.C3js.Chart/c3js/c3.min.css" rel="stylesheet" />

And before the tag body and after the blazor.js framework put:

    <script src="_content/Rrs.Blazor.C3js.Chart/c3js/d3.min.js"></script>
    <script src="_content/Rrs.Blazor.C3js.Chart/c3js/c3.min.js"></script>
    <script src="_content/Rrs.sBlazor.C3js.Chart/C3jsChart.js"></script>
</body>

I'm waiting for your contribution. Thanks.