Is discontinuous data supported?

[grotewortel]

Hi,

Is there a way to make a line graph with discontinuous data?

For example with:
const data = [
{ x: 0, y: 300 },
{ x: 10, y: 300 },
{ x: 15, y: 280 },
];

Thank you!
Jan

[Abhinandan-Kushwaha]

Yes @grotewortel you can find the convenient x-interval and add empty objects at intervals that have no data.
For example in the data you shared, the interval can be 5. So the data can be-

data = {[
  {value: 300},
  {},            // at x = 5, insert a dummy object
  {value: 300},
  {value: 280}
]};

[grotewortel]

Hi,

Thank you for your fast answer!

That will work for me I guess. I am not sure if it will be a solution for everybody because it might end up with a lot of dummy objects.

When trying this out, it looks like the X label width is influenced by the dummy objects. The line chart does not seem to have an labelWidth property.
Q1: Is it possible to get the labels on 1 line?

without dummy objects

original data:

[{"label": "1 km", "showXAxisIndex": true, "value": 370}, {"label": "2 km", "showXAxisIndex": true, "value": 362}, {"label": "3 km", "showXAxisIndex": true, "value": 354}, {"label": "3.5 km", "showXAxisIndex": true, "value": 348}]

with dummy objects

the same data but now with dummy objects:

[{}, {}, {}, {}, {}, {"label": "1 km", "showXAxisIndex": true, "value": 370}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {"label": "2 km", "showXAxisIndex": true, "value": 362}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {"label": "3 km", "showXAxisIndex": true, "value": 354}, {}, {}, {}, {}, {}, {}, {}, {"label": "3.5 km", "showXAxisIndex": true, "value": 348}]

Chart code:

<LineChart
    yAxisOffset={340}
    maxValue={60}
    noOfSections={12}
    stepValue={5}
    color="#07BAD1"
    data={inputData}
    adjustToWidth={true}
    rulesType="solid"
    initialSpacing={20}
    endSpacing={20}
    dataPointsColor="red"
    dataPointsRadius={5}
    showXAxisIndices={false}
    xAxisTextNumberOfLines={3}
/>

Question 2
The adjustToWidth seems to fill the horizontal space nicely, but I would like the whole chart to show on the available width. Now a part is off screen and scrolling is needed. How can this be achieved?

Question 3
In the screenshots, you can see small black dots, on the x axis, just above the labels. If I set xAxisIndicesHeight={0}, they disappear. However, I would expect that they do not appear at all because showXAxisIndices={false} (which seems to be the default anyway. Is this expected behaviour?

Again, thank you for your time and effort. I is highly appreciated!
Cheers,
Jan

[Abhinandan-Kushwaha]

Hi @grotewortel

Q1. x-axis label width can be controlled using the xAxisLabelTextStyle prop. For the number of lines, xAxisTextNumberOfLines prop can be used.

Q2. To fit the entire chart, along with adjustToWidth, try disableScroll and endSpacing = { 0 or a -ve value}

Q3. The small black dots on the x-axis are coming because you used "showXAxisIndex": true, in your inputData. The properties provided through the data array override the direct props.

[grotewortel]

Awesome! The text labes are fixed! The dots are gone also :-)
The scroling is disabled, but the last part of the data is still off screen ...

I stripped as much properties as possible to avoid confusion.

<LineChart
  data={inputData}
  adjustToWidth={true}
  disableScroll={true}
  initialSpacing={0}
  endSpacing={0}
  dataPointsColor="red"
  dataPointsRadius={5}
  xAxisLabelTextStyle={{ width: 80 }}
/>

[Abhinandan-Kushwaha]

Looks like the parent View of in your code has some margin/padding. You can use the parentWidth prop. See #960 (comment)

[grotewortel]

Yes, that seems to influence it. Thank you. I will figure out how it works.

Note: I dont think the prop it is mentioned in LineChartProps.md yet.
Note2: The seems to be a typo in the gifted-charts.web.app link in your main readme (line 26)

Thank you very much! It is highly appreciated!

[Abhinandan-Kushwaha]

Thanks for pointing out the typo in readme