0

I am currently working on a project where I need to display some values in a graph. I have been looking at Chart.js and created two simple charts displaying temperature and humidity. My problem is that I can not get the two charts next to each other. As now it only displays above one another.

I have tried using flexbox with flexGrow set to 1 and other values, but I would like them to scale up next to each other with the same size.

    <div style={{display: "flex"}}>
      <Temperature chartDataTemperature={this.state.chartDataTemperature} legendPosition="bottom" />
    </div>
    <div style={{display: "flex"}}>
    <Humidity chartDataHumidity={this.state.chartDataHumidity} legendPosition="bottom"/>
    </div>

With this code the charts are displayed on top of each other.

I have also tried putting both charts inside the same div but it does not look right.

I have added my project to GitHub if anyone would take a look. https://github.com/henrik3/logg

Henrik
  • 1
  • 2

1 Answers1

0

You have an syntax error on 

<div style={{display: "flex"}}>

This is the correct way:

 <div style="display: flex;">

This is the correct way:

<div styles="{{display: flex;}}">

Take a look at this example: 

<div style="display: flex;">
      <div style="width: 100px; height: 100px; background-color:red;">
        <p>
          CHART
        </p>
      </div>
      <div style="width: 100px; height: 100px; background-color:blue;">
        <p>
          CHART
        </p>
      </div>
    </div>

https://www.w3schools.com/html/html_styles.asp

Take a look at this anwser.

Gastón Corti
  • 51
  • 1
  • 6
  • When I use your suggestion I get this error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. It was fixed by wrapping the style in both divs in doble curly brackets. – Henrik Mar 09 '18 at 07:57
  • whoops! din't see that was JSX. – Gastón Corti Mar 09 '18 at 19:06