Stacked columns are getting overlapped
Hi Roberto,
Greetings from Syncfusion.
We have created a simple Core application using the provided sample code. But, we are unable to replicate the reported scenario. Please find the below tested sample link for your reference.
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/StackedColumnChart-165159574
Code Snippet:
|
List<SeriesData> SeriesCollection = new List<SeriesData> { new SeriesData { Data = new List<ChartData> { new ChartData { x = new DateTime(2022, 11, 17), y = 20 }, new ChartData { x = new DateTime(2022, 11, 18), y = 30 }, new ChartData { x = new DateTime(2022, 11, 19), y = 40 } }, texto = "Linha - 2" }, new SeriesData { Data = new List<ChartData> { new ChartData { x = new DateTime(2022, 11, 17), y = 20 }, new ChartData { x = new DateTime(2022, 11, 18), y = 30 }, new ChartData { x = new DateTime(2022, 11, 19), y = 40 } }, texto = "Linha - 1" } }; ViewBag.seriesCollection = SeriesCollection; |
Screenshot:
If the reported scenario still persists, please modify the above sample link to replicate the reported scenario. Please share the package version that you are using. It will be helpful for us to analyze further and assist you better.
Regards,
Swetha
HI,
The issue is back.
I put simple Data to do a test with just one point. So, I had a big witdh column with many date.
Coud you help?
<ejs-chart id="seriesDiaLinha"
locale="pt"
title="PERDA DIÁRIA POR LINHA"
width="95%">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="true"></e-chart-legendsettings>
<e-chart-primaryxaxis valueType="DateTime"
labelFormat="dd/MM/yy">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="@ViewBag.seriesDiaLinha[0].Data"
xName="x"
yName="y"
name="Empresa"
type=StackingColumn>
<e-series-marker>
<e-series-datalabel visible="true" position="Outer">
<e-font fontWeight="600"
size="8"
color="#000000"></e-font>
</e-series-datalabel>
</e-series-marker>
<e-series-border width="4"></e-series-border>
<e-series-emptypointsettings mode="@Syncfusion.EJ2.Charts.EmptyPointMode.Zero"></e-series-emptypointsettings>
</e-series>
</e-series-collection>
</ejs-chart>
series.AddRange(new List<SeriesData>
{
new SeriesData(){
texto="Empresa",
Data = new List<StackedChartData>(){
new StackedChartData()
{
x= new DateTime(2022, 09, 09),
y=30
}
},
},
}
);
I changed your exemple to with just ONE data and comment anothers data, so I had the same issue.
public IActionResult Index()
{
List<SeriesData> SeriesCollection = new List<SeriesData>
{
new SeriesData
{
Data = new List<ChartData> {
new ChartData { x = new DateTime(2022, 11, 17), y = 20 },
//new ChartData { x = new DateTime(2022, 11, 18), y = 30 },
//new ChartData { x = new DateTime(2022, 11, 19), y = 40 }
},
texto = "Linha - 2"
},
//new SeriesData
//{
// Data = new List<ChartData>
// {
// new ChartData { x = new DateTime(2022, 11, 17), y = 20 },
// new ChartData { x = new DateTime(2022, 11, 18), y = 30 },
// new ChartData { x = new DateTime(2022, 11, 19), y = 40 }
// },
// texto = "Linha - 1"
//}
};
ViewBag.seriesCollection = SeriesCollection;
return View();
I´m using Syncfusion.EJ2.AspNet.Core 20.2.0.48
Hi Roberto,
When we set the single data for the Column chart, the Column width gets rendered based on the size of the chart so, the axis label gets overlapped. It takes the provided data as a midpoint of the Column chart.
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ColumnChart699797244
Screenshot:
In the above screenshot, we have enabled the marker. The marker gets rendered middle of the Column as it takes the provided data as a midpoint of the Column.
Kindly, revert us if you have any concerns.
Regards,
Swetha
Hello,
Hello,
I understand that the chart is behaving as expected, but this visualization model for the user didn't look good. When DateTimeCategory is placed, the chart view is perfect, but it doesn't show in the timeline.
I simulated it with other settings in the DateTime model and it got confused too.
I think the solution will be to use DateTimeCategory and create the dates with blank data.
Chart with DateTime
Chart with DateTimeCategory
Same data DateTime and now with DateTimeCategory, perfect but I do not have 10/09, 11/09 dates with zero or blank data, so How can I show the chart like this model using DateTime? Is It possible?
I tested it with GoogleChart and the timeline view is shown similarly to the DateTimeCategory when there is only one date.
Thanks for the answer.
Hi Roberto,
We can achieve you requirement by using the DateTime valueType itself by setting the interval property as 1 and intervalType property as Days in primaryxaxis. We have created a simple Core application to demonstrate the same and it can be downloaded from the below link.
Sampel link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ColumnCharts-999154942
Code Snippet:
|
<e-chart-primaryxaxis valueType="DateTime" interval="1" intervalType="Days" labelFormat="dd/MM/yy"> </e-chart-primaryxaxis> |
Screenshot:
Please let us know if the provided sample meets your requirement. Kindly, revert us of you have any concerns.
Regards,
Swetha
