CedChart.js is a react-native module which render a scalable Line Chart

Usage no npm install needed!

<script type="module">
  import cedchart from 'https://cdn.skypack.dev/cedchart';



CedChart.js is a react-native module which renders a scalable Line Chart.

Table of Contents

  1. Description
  2. Installation
    1. Dependencies
  3. Usage
    1. Compulsory properties
    2. Color
    3. Second Color
  4. Contributing
  5. F.A.Q


  • The x-axis can contain hourly, weekly or monthly values. The scale will adapt depending on the amount of data with more or less vetical strokes displaying.

  • The y-axis will always display 11 adaptive values corresponding to 0, 10, 20, 30, ... , 100% of the data's max value.


You can install the module through npm: https://www.npmjs.com/package/cedchart

run npm install cedchart


  • You implement the chart by calling <CedChart /> in your render()

Compulsory properties

  • Option 1 - You pass pre-fetched data to the Chart: You need 4 props: data, timeUnit, valUnit and period.

    • data must be an array of objects containing at least 2 different object with at least a time unit and a value unit. IMPORTANT: Your time unit must be of a Unix Time Stamp format with 10 digits (see Example below)
    • timeUnit and valUnit are just titles that need to match the names of your time and value names inside your data.
    • period will determine the format of the date. Please indicate 1d for 24-hour format, 1w for day-of-the-week format and 1m or 3m for mm/dd format. Warning: If you want 24-hour format, you also need to have a data array that corresponds to 24 hours worth of data. Same goes for other periods.


              time: '1570522315',
              value: '0',
              time: '1570522215',
              value: '100',
        dataType = {"temperature"}  
        timeUnit = {"time"}
        valUnit = {"value"}
        period = {"1d"} 


One additional property for your Chart is color. You can choose between 6 colors:

  • red
  • green
  • blue
  • orange
  • purple
  • pink

If not specified, the default color is blue.


    data= {[...]}
    timeUnit= {"time"}
    valUnit= {"value"}
    color= {"red"}

Second Color

Another additional property for your graph is secondColor. This allows you to have a custom gradient color different from the main line color. The same colors as color: are available.

If not specified, the default second color is the same as the main color.


    data= {[...]}
    timeUnit= {"time"}
    valUnit= {"value"}

Y Label

yLabel is an additional property to label the y-axis.


    data= {[...]}
    timeUnit= {"time"}
    valUnit= {"value"}
    yLabel= {"°C"}


Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. https://github.com/ThatFrenchComputerGuy/CedChartJs


Can I change the aspect ratio of the chart ?

This Chart module has been thought to take the full width of the screen so please Full compatibility cannot be guaranteed if you change the width ratio.

The Chart should render nicely on any screen width so please open an issue stating your screen ratio if it does not.

You can adapt the height a little bit.

Can I load multiple graphs on the same screen ?

Yes you absolutely can.