Detailed example for ApexRangeSeries

Hejsån! Great charts, just wish there would be more detailed examples somewhere and wider audience for keeping this repo alive and actively maintained. I have got majority of examples working, but can’t figure out how you managed ApexRangeSeries functioning.

I have seen documentation: https://apexcharts.github.io/Blazor-ApexCharts/rangebar-charts

Basically I am trying to imitate GanttChart with this chart, so I came up with this model:

    protected async override Task OnInitializedAsync()
    {
      this.ProjectsList = await this.HttpClient.GetFromJsonAsync<IEnumerable<Project>>("api/Projects");

      this.InitializeGanttChartOptions();

      this.GanttChart = this.ProjectsList
      .Select(s => new GanttChartModel
      {
        XAxisValue = s.Name,
        YAxisValue = new List<decimal> { s.ProjectStartDate.Ticks, s.ProjectEndDate.Ticks },
      }).ToList();
    }

Then razor part:

  <ApexChart TItem="GanttChartModel"
           Title="Gantt view"
           Options=Options
           XAxisType="XAxisType.Datetime">
    <ApexRangeSeries TItem="GanttChartModel"
                   Items="this.GanttChart"
                   XValue="@(e => e.XAxisValue)"
                   YValue="@(e => e.YAxisValue)" />
  </ApexChart>

So at this point YValue is decimal, but for getting range it should be public IEnumerable<decimal> YAxisValue { get; set; }. How to get it working?

My model:

  public class GanttChartModel
  {
    public object XAxisValue { get; set; }
    public IEnumerable<decimal> YAxisValue { get; set; }
  }

[joadan]

I have now added the option to set YMin/Max value on the ApexRangeSeries. Check it out at https://apexcharts.github.io/Blazor-ApexCharts/rangebar-charts#date range . There is a new nuget version 0.6.1-alpha.

Formatting Datetime X Axis is described here, https://apexcharts.com/docs/datetime/ Docs for the X-Axis options, here https://apexcharts.com/docs/options/xaxis/

For the dynamic height I guess you should be able to set the the height on the chart calculated from the number of items in the list.

Please let me know if there are questions.

[joadan]

Clean up