angularngx-charts

ngx-charts library: How to change space between y-axis and first group in bar chart


I am working with ngx-charts trying to vizualise some data in a combo-chart of barcharts and line charts. I have most issues worked out, but I cannot figure out what I should change in my code to control the space between the y-axis of my chart, and the initial group in my barchart.

I was wondering has anyone that has worked with ngx-charts before encountered this, and hopefully solved the issue? If anyone knows if this could be a variable set anywhere, the insight would be greatly appreciated.

gap between y-axis and data Edit: Adding another image to show that this is not an issue with missing data, as on another graph of mine the spacing is equal from both ends.

Equal gap from both y-axes


Solution

  • Answering for myself:

    So I've been continuing to have a look myself throughout the day, and I've found a solution. Perhaps not a permanent solution, or even a good solution, but it turns out to have something to do with some transform scss that is being injected into the graph components encountering issues. It seems to be baked into the code from the chart library.

    For the moment, which may be a temporary fix for someone else, I have added an extra attribute to my components that are effected such as:

    <my-component [attr.transform]="customTransform">
    

    defined 'customTransform' as a string with component scope, and made its value:

    this.customTransform = `translate(-35 , 0)`;