I have set Custom Colors for 4 Ranges in Horizontal bar chart and values within each range have specific colors to distinguish, which are 4 Different Colors as Green Color, Yellow Color, Red Color and Black Color. As I set Custom Colors, the Xaxis value of Horizontal bar chart is repeating 2 times.
@using UIDesignBlazorApexChart.Client.Theme@inject IThemeService ThemeService<style> .apexcharts-tooltip { color: black; } .apexcharts-menu { color: black; }</style><MudGrid><MudItem xs="12"><DemoContainer><MudButtonGroup Color="MudBlazor.Color.Default" Variant="Variant.Filled" Size="MudBlazor.Size.Small" Style="margin-bottom:10px;"><MudButton FullWidth>@_buttonText</MudButton><MudMenu Icon="@Icons.Material.Filled.ArrowDropDown" Style="align-self: auto;"> @foreach (var appName in AppNames) {<MudMenuItem OnClick="() => SetButtonText(appName)">@appName.Display</MudMenuItem> }</MudMenu></MudButtonGroup><div Style="height:300px;background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(232,229,231,1) 100%);"><ApexChart Height="300" @ref=chart TItem="Risk" Title=@GetTitle() Options=options Debug><ApexPointSeries TItem="Risk" Items="risks" Name="Gross Value" SeriesType="SeriesType.Bar" XValue="@(e => e.Name)" YAggregate="@(e => e.Sum(e => e.Value))" Color="#64DD17" PointColor="e=> GetColorForValue(e)" /></ApexChart></div></DemoContainer></MudItem></MudGrid>@code { private string GetColorForValue(Risk risk) { if (risk.Value < 1.25M && risk.Value > 0) { return "#64DD17"; // Green } else if (risk.Value < 2.5M && risk.Value >= 1.25M) { return "#FFB300"; // Orange } else if (risk.Value < 3.75M && risk.Value >= 2.5M) { return "#FF0000"; // Red } else { return "#424242"; // Gray } } private ApexChart<Risk> chart; private List<Risk> risks { get; set; } = new List<Risk>(); private string _buttonText = "Quality Data Lake for Reliance from Hexagon ETQ being added to existing SaaS platform for Seeds Reliance"; private ApexChartOptions<Risk> options; private async Task UpdateChart() { await chart.RenderAsync(); } protected override void OnInitialized() { risks = new List<Risk>(); foreach (var item in SampleData.GetOrders()) { risks.Add(new Risk { Name = item.Name, Value = item.Value }); } base.OnInitialized(); options = new ApexChartOptions<Risk> { PlotOptions = new PlotOptions { Bar = new PlotOptionsBar { Horizontal = true } }, Theme = new Theme { Mode = Mode.Light, Palette = PaletteType.Palette1 } }; } private List<AppName> AppNames = new List<AppName>() { new AppName { Value = 1, Display = "Quality Data Lake for Reliance from Hexagon ETQ being added to existing SaaS platform for Seeds Reliance" }, new AppName { Value = 2, Display = "Application of Smart Trac sensors with 3G/4G mobile network communication for the Tractian Platform"}, new AppName { Value = 3, Display = "Leadscope Model Applier - Acute Toxicity QSAR Suite"}, new AppName { Value = 4, Display = "Orion"}, new AppName { Value = 5, Display = "SynGPT Web and Teams Version (Syngenta's Private ChatGPT Instance)" } }; private int selectedApp = 1; private int selectedAppID = 1; // Default selection private string GetTitle() { return "Detailed Risk view for each application "; } private async Task SetButtonText(AppName selectedAppName) { _buttonText = selectedAppName.Display; selectedAppID = selectedAppName.Value; await UpdateChartAsync(selectedAppID); } private async Task SelectApp(AppName selectedAppName) { selectedApp = selectedAppName.Value; await UpdateChartAsync(selectedApp); } private async Task UpdateChartAsync(int selectedAppID) { GetOrdersAsync(selectedAppID); await chart.RenderAsync(); } private async Task<List<Risk>> GetOrdersAsync(int selectedAppID) { // Replace this with the appropriate logic based on the selected app switch (selectedAppID) { case 1: return risks= await Task.FromResult(SampleData.GetOrders()); // Sample data for the first app break; case 2: return risks = await Task.FromResult(SampleData2.GetOrders()); // Sample data for the second app break; case 3: return risks = await Task.FromResult(SampleData3.GetOrders()); // Sample data for the second app break; case 4: return risks = await Task.FromResult(SampleData4.GetOrders()); // Sample data for the first app break; case 5: return risks = await Task.FromResult(SampleData5.GetOrders()); // Sample data for the second app break; // Add cases for other apps as needed default: return risks = await Task.FromResult(SampleData.GetOrders()); // Default to the first app's data break; // Render the chart asynchronously await chart.RenderAsync(); } } public class Risk { public string Name { get; set; } public decimal Value { get; set; } } public class AppName { public int Value { get; set; } public string Display { get; set; } } public static class SampleData { public static List<Risk> GetOrders() { var risks = new List<Risk> { new Risk { Name = "InformationSecurityPolicy", Value = 1.45M }, new Risk { Name = "OrganisationOfInfoSecurity", Value = 1M }, new Risk { Name = "HumanResourceSecurity", Value = 1M }, new Risk { Name = "AssetManagement", Value = 1.8M }, new Risk { Name = "AccessManagement", Value = 1.45M }, new Risk { Name = "Cryptography", Value = 1.6M }, new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M }, new Risk { Name = "OperationsSecurity", Value = 1.25M }, new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M }, new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 3.8M }, new Risk { Name = "SupplierRelationships", Value = 1.25M }, new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M }, new Risk { Name = "BusinessContinuityManagement", Value = 3.2M }, new Risk { Name = "LegalandRegulatoryRisk", Value = 1M } }; return risks; } } public static class SampleData2 { public static List<Risk> GetOrders() { var risks = new List<Risk> { new Risk { Name = "InformationSecurityPolicy", Value = 3.45M }, new Risk { Name = "OrganisationOfInfoSecurity", Value = 1.35M }, new Risk { Name = "HumanResourceSecurity", Value = 1M }, new Risk { Name = "AssetManagement", Value = 2.8M }, new Risk { Name = "AccessManagement", Value = 1.45M }, new Risk { Name = "Cryptography", Value = 2.6M }, new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M }, new Risk { Name = "OperationsSecurity", Value = 1.25M }, new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M }, new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 1M }, new Risk { Name = "SupplierRelationships", Value = 1M }, new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M }, new Risk { Name = "BusinessContinuityManagement", Value = 2.5M }, new Risk { Name = "LegalandRegulatoryRisk", Value = 1M } }; return risks; } } public static class SampleData3 { public static List<Risk> GetOrders() { var risks = new List<Risk> { new Risk { Name = "InformationSecurityPolicy", Value = 2.45M }, new Risk { Name = "OrganisationOfInfoSecurity", Value = 1M }, new Risk { Name = "HumanResourceSecurity", Value = 1.8M }, new Risk { Name = "AssetManagement", Value = 1M }, new Risk { Name = "AccessManagement", Value = 1.6M }, new Risk { Name = "Cryptography", Value = 1.45M }, new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M }, new Risk { Name = "OperationsSecurity", Value = 3.8M }, new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M }, new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 2M }, new Risk { Name = "SupplierRelationships", Value = 1.25M }, new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M }, new Risk { Name = "BusinessContinuityManagement", Value = 3.2M }, new Risk { Name = "LegalandRegulatoryRisk", Value = 1M } }; return risks; } } public static class SampleData4 { public static List<Risk> GetOrders() { var risks = new List<Risk> { new Risk { Name = "InformationSecurityPolicy", Value = 1.45M }, new Risk { Name = "OrganisationOfInfoSecurity", Value = 1M }, new Risk { Name = "HumanResourceSecurity", Value = 1.8M }, new Risk { Name = "AssetManagement", Value = 1M }, new Risk { Name = "AccessManagement", Value = 1.6M }, new Risk { Name = "Cryptography", Value = 1.45M }, new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M }, new Risk { Name = "OperationsSecurity", Value = 3.8M }, new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M }, new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 3.5M }, new Risk { Name = "SupplierRelationships", Value = 1.25M }, new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M }, new Risk { Name = "BusinessContinuityManagement", Value = 3.2M }, new Risk { Name = "LegalandRegulatoryRisk", Value = 1M } }; return risks; } } public static class SampleData5 { public static List<Risk> GetOrders() { var risks = new List<Risk> { new Risk { Name = "InformationSecurityPolicy", Value = 2.45M }, new Risk { Name = "OrganisationOfInfoSecurity", Value = 1M }, new Risk { Name = "HumanResourceSecurity", Value = 1.8M }, new Risk { Name = "AssetManagement", Value = 1M }, new Risk { Name = "AccessManagement", Value = 1.6M }, new Risk { Name = "Cryptography", Value = 1.45M }, new Risk { Name = "PhysicalEnvironmentalSecurity", Value = 1M }, new Risk { Name = "OperationsSecurity", Value = 3.8M }, new Risk { Name = "CommunicationsNetworkSecurity", Value = 1.6M }, new Risk { Name = "SystemAcquisitionDevMaintenance", Value = 2M }, new Risk { Name = "SupplierRelationships", Value = 1.25M }, new Risk { Name = "InformationSecurityIncidentManagement", Value = 1.75M }, new Risk { Name = "BusinessContinuityManagement", Value = 3.2M }, new Risk { Name = "LegalandRegulatoryRisk", Value = 1M } }; return risks; } }}I want X-axis as 0, 0.5,1,1.5,2,2.5,3,3.5,4..... But it is displaying as 0,1,1,2,2,3,3,4,4.... I have tried using apexchart nuget package as well as apexchart.js facing the same issues in both sides. How to Fix This Issue?