LineChart not use all space

[ruiaraujolink]

The LineChart does not use all space available, what can I do?

My code on snack

[tlow92]

You used fromZero which sets minimum to 0

[ruiaraujolink]

Right, but I want to remove what is behind the orange mark, sorry if the drawing is not clear enough

[abhiburk]

Did you solved the issue ? I am facing the same issue

[ruiaraujolink]

Did you solved the issue ? I am facing the same issue

No, I'm still facing this issue.

[luco]

Same here

[anwersolangi]

Anyone who solved the issue?

[ruiaraujolink]

Anyone who solved the issue?

I don't

[nick-0101]

I've found an alternative to react native chart kit. Only use this if your main use is a Line Graph. This solves the graph space problem for me and provides a ton more customization options, it also supports Expo!

https://github.com/xanderdeseyn/react-native-responsive-linechart

[karonator]

Any help, please? Faced the same problem...

[lucidprojects]

Same problem. Hopefully one day a solution will be posted here

[lucidprojects]

Ok after a few days of hacking I have a solution that is working for my issue.

You need to edit a few library files, so first things first copy node_modles/react-native-chart-kit to a new directory within your project. Something like:

external_modules/react-native-chart-kit/

Then link to it in your react file (updating the path for your file system etc), like:

import { LineChart } from "../../external_modules/react-native-chart-kit";

This is to preserve the library modifications so they don't get overwritten with future npm module installs / updates.

For my case, I only needed this if my dataset.length was less than a certain number, for me it was 8. Otherwise, my line graph spanned the whole width.

There are 3 things to handle, the dots, the lines, and the labels.

For the dots:

Modify the _this.renderDots method in react-native-chart-kit/line-chart/LineChart.js

The method goes through the dataset and sets an x value for each data point. I'm setting a variable for the total width of all the dots and then comparing it to the width of the graph. If it is the last index of the dataset and my totalXWidth value subtracted from width is greater than a threshold I modify the last index's x value.

_this.renderDots = function (_a) {

...
// instantiate variable for sum of dot's x values
var totalXWidth;  

data.forEach(function (dataset) {
if (dataset.withDots == false)
    return;
dataset.data.forEach(function (x, i) {
    if (hidePointsAtIndex.includes(i)) {
        return;
    }

   // old X value code
   // var cx = paddingRight + (i * (width - paddingRight)) / dataset.data.length;

   // new X value code. some of the thresholds may need to be adjusted for your case
   var cx;
   if (i === dataset.data.length - 1 && (width - totalXWidth) > 55){ 
        cx = (i * width / dataset.data.length) + width / dataset.data.length - 30;
    } else {
        cx = paddingRight + (i * (width - paddingRight)) / dataset.data.length;
    }

    // update totalXWidth var for each dot's x value 
    totalXWidth =+ cx;

    ...
    }
}

For the lines:

I am using a bezier line so modify the getBezierLinePoints method in the same LineChart.js file. Similar iterating through data and checking a threshold to see if the last index should be pushed further right.

_this.getBezierLinePoints = function (dataset, _a) {
     ...

     var x = function (i) {
        // old X code
        // return Math.floor(paddingRight + (i * (width - paddingRight)) / dataset.data.length);    

        // new X code
        if (i === dataset.data.length - 1 && dataset.data.length < 8){ 
            return Math.floor((i * width / dataset.data.length) + width / dataset.data.length - 30);    
        } else {
            return Math.floor(paddingRight + (i * (width - paddingRight)) / dataset.data.length);
        }    

     };

     ...
}

For the labels:

The last change we need to make is for the labels. This is in react-native-chart-kit/AbstractChart.js

Again we check the dataset or in this case labels length and update the last index based on a threshold value.

_this.renderVerticalLabels = function (_a) {
    ...
    // instantiate variable for sum of labels's x values
    var labelsXTotal;
    return labels.map(function (label, i) {
        ...
        // existing X value code
        var x = (((width - paddingRight) / labels.length) * i +
            paddingRight +
            horizontalOffset) *
            fac;
        var y = height * verticalLabelsHeightPercentage +
            paddingTop +
            fontSize * 2 +
            xLabelsOffset;

        // added X value code     
        if (labels.length <=8){

        // new X value code. some of the thresholds may need to be adjusted for your case        
            if (i === labels.length - 1 && (width - xLabelsOffset) > 55) x = width -30;    

            // update totalXWidth var for each labels's x value 
            labelsXTotal =+ x;
        }    
        ...
    }
}

This could probably be refactored a bit cleaner and not have hardcoded threshold amounts but its working for me and I really need to more on from my line graph. lol

Hope it helps others.

[tlow92]

Ok after a few days of hacking I have a solution that is working for my issue.

You need to edit a few library files, so first things first copy node_modles/react-native-chart-kit to a new directory within your project. Something like:

external_modules/react-native-chart-kit/

Then link to it in your react file (updating the path for your file system etc), like:

import { LineChart } from "../../external_modules/react-native-chart-kit";

This is to preserve the library modifications so they don't get overwritten with future npm module installs / updates.

You can use patch-package for that. Just change the files in node_modules/react-native-chart-kit and run npx patch-package react-native-chart-kit. Add patch-package call to postinstall of package.json to automatically apply patch after npm install.

Another benefit is, that you can share the patch file here, so people can just copy it and run patch-package.

[lucidprojects]

wow @tlow92 that is a useful package! patch-package installed. Patched chart-kit package attached. react-native-chart-kit.zip

cheers ✌️

[leidto]

Doesn't work with area chart.

[mynameisguy]

Much simpler approach if you have at least 2 data points is to change the divider to be length - 1 instead of length. For example, change: Math.floor(paddingRight + (i * (width - paddingRight)) / dataset.data.length) to Math.floor(paddingRight + (i * (width - paddingRight)) / (dataset.data.length-1))

[ZaharGusyatin]

any updates?

[ZaharGusyatin]

okay, if u can and want to make forks, u can find this Math.floor(paddingRight + (i * (width - paddingRight)) / dataset.data.length) and change to Math.floor(paddingRight + (i * (width - paddingRight)) / (dataset.data.length-1)) if u don`t want to make a fork, u can use this: **

<LineChart
          data={{
            datasets: [{
              data: data
            }]
          }}
          width={widthW + widthW / (data.length - 1)}

** when widthW is Dimensions.get('window').width

[lzagar-itm]

Are there any updates?

[karonator]

Are there any updates?

You can use version from my fork, I fixed this issue there... https://github.com/karonator/react-native-chart-kit

[mbalazy]

Are there any updates?

[Girish-Official-CBT]

any updates ? still facing issue.

[mauricebutts]

Yea would like a fix here too, is this repo active anymore?

[renatomserra]

facing this issue too, i think this repo is not maintained anymore

[tiagopazhs]

I Know that is not the best way:

Use Dimensions:

Style={{ paddingRight: Dimensions.get('window').width 0.04, // (change to the percentage that fit better for yout) paddingLeft: Dimensions.get('window').width 0.16

      }}

[haysjanete]

I have found a solution to my issue by wrapping my chart component into a ScrollView rather then just a View and that helped my chart go all the way.