Simple Ngx-Charts leaving too much gap on both sides of X-axis
I have an ngx-material vertical stacked chart and my data is very simple, yet i find that for slightly larger data sets, a large gaps shows up on both sides of the x-axis labels.
Any idea what I am doing wrong?
Here is a visual:
And here is a stackblitz with my simple example:
https://stackblitz.com/edit/swimlane-stacked-vertical-bar-chart-hvkbtb?file=app%2Fdata.ts
Solution
You are not doing anything wrong.
It's a scaling problem when you have a lot of ticks on the X-axis. You can see the difference if you will change the view size from 700x500 to 1000x500.
Similar request was already made and it has open status: github.com/swimlane/ngx-charts/issues/1472
- Confirm password validation in angular
- Avoid referencing unbound methods which may cause unintentional scoping of `this` error when calling static methods
- Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
- How to Create a specific version of Angular Project using CLI?
- Angular how to use slicePipe in the new @for loop
- How to add unit tests for Signal Queries?
- Integratin CalHeatMap into Anguar app with SSR
- How to prevent the border radius from disortion when decreasing the height?
- Angular WebComponent instances is getting created multiple times
- How to use async function to await user input from onClick?
- Angular SSR complains about non-ESM modules in my Express API code
- Angular - react to changes in rxResource()
- I get "Http failure response for (unknown url): 0 Unknown Error" instead of actual error message in Angular
- Angular 17 does not post and i get an TypeError in dev console
- Angular 5 component testing select and triggered event
- How to observe touched event on Angular 2 NgForm?
- How to check whether <ng-content> is empty? (in Angular 2+ till now)
- How to accept only predefined values in an Angular @Input
- NavLink in React JS not working as expected?
- Can't modify inner content of ViewContainerRef, only adding tags after it in Angular
- Override User Agent Styling for Auto fill input fields
- Module not found: Error: Can't resolve 'class-transformer/storage' - Angular Universal / NestJs
- Angular 4 - Failed: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)
- How should I reference different files for different devices using Angular?
- Can't access a field of an object in TypeScript by using a variable as a name of the index unless declared as a constant
- Angular 16 Signal update doesn't update view
- class is a standalone component, which can not be used in the `@NgModule.bootstrap` array in Angular
- Is there a way to set a default value to signal's rxResource() such as signal()
- How to generate dynamic metadata from an Angular component using node js?
- Where is 'new BrowserWindow()' in Angular Electron application