React native Question posted in
The official React Native documentation can be found here.

How to create a step line chart in React Native?

How to create a step line chart as the below figure:

enter image description here

I’m looking for a library that supports creating step line charts in a React Native application. I know about libraries like react-native-chart-kit, but it doesn’t natively support step line charts (with horizontal and vertical lines between data points). Is there a recommended library or method to achieve this functionality in React Native?

I hope someone could help me.

Thank for your support.

Tags:

2

Answers


  1. 0

    You can try the following libraries:

    react-native-gifted-charts

    It offers a lot of customization option for graphs.

    Feel free to reach out if you need any further clarification regarding customization.

    Login or Signup to reply.
  2. 0

    Can be easily done with highchart.js

    Here is the sample code snippet for the same

    (() => {

// Create the chart
Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'AAPL Stock Price'
    },

    series: [{
        name: 'AAPL Stock Price',
        data: [2,3,4,4,6,8,6,7,9,2,4,6,3,5],
        step: true,
        tooltip: {
            valueDecimals: 2
        }
    }]
});
})();

    Output:-

    enter image description here

    Sharing jsfiddle as well for a reference:

    https://jsfiddle.net/rufqe7x6/

    You can load it using webView, or can create native modules as well.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search