How to style elements for responsive web design?

Question

I have created pie chart using chartist.js I am not able to create responsive web design. When I reduce window size i.e for small window the legend should go above pie chart and for large window size the legend should be on right hand side. So for large size it works but for small screen size the legend is overlapping piechart. How can I style legend so that for small screen it will go above pie chart and not overlap piechart.

Note: I have created piechart as a react component.

Chartist legend docs: https://github.com/CodeYellowBV/chartist-plugin-legend/blob/master/index.html

Code:

React component i.e pie chart:

import React, { Component } from 'react';

var options = {
  width:200,
  height:200,
  showLabel:false,
  stackBars:true,
  plugins: [
        Chartist.plugins.legend()
  ]
};

class Pie extends Component {

  constructor(props){
    super(props);
  }
        const data = {
          labels: labels,
          series: dismissals
        };


    this.piechart = new Chartist.Pie('.ct-pie-chart', data, options);

  }

  render(){
    return(
      <div className="row">
          <div className="col-12 col-sm-6 col-lg-8">
                <div className="ct-pie-chart">
                    {this.piechart}
                </div>
          </div>
      </div>
    )}
}

export default Pie ;

CSS file:

.ct-pie-chart .ct-legend li.inactive:before {
  background: transparent;
}

.piechart-title {
  text-align: center;
}

.ct-pie-chart .ct-legend {
  position: absolute;
  padding-left: 80px;
}

.ct-pie-chart .ct-legend.ct-legend-inside li{
           display: block;
           margin: 0;
}

Screenshot (For small and large screen) :

I Added following css but it does not work:

.ct-pie-chart {
  display: flex;
  align-items: flex-start;
}

.ct-pie-chart .ct-legend {
  position: absolute;
  padding-left: 80px;
}

score 1 · Answer 1 · answered Jun 24 '18 at 16:15

1

In order to make responsive you have to write media query for your css Take this link here for sample and this one for details breakpoint

answered Jun 24 '18 at 16:15

I have created flex box now should I create media queries for chart? – stone rock Jun 24 '18 at 16:17
Flex box and media queries are 2 different things. Like I have mentioned above you should write media query to make chart responsive – Jun 24 '18 at 16:19
Any idea how can I add legends on top for small screen using media query. – stone rock Jun 24 '18 at 16:21
I understood that for small screen I should use `@media screen and (min-width: 300px) { .ct-pie-chart .ct-legend{ } }` but could not understand what should I insert inside it so that it will apear on top of pie chart and not overlap it. – stone rock Jun 24 '18 at 16:23
You can make a div then use write media query for that screen like this /* SMARTPHONES LANDSCAPE */ @media only screen and (min-width: 480px) { } You can view get bootstrap sample here https://getbootstrap.com/docs/4.1/examples/navbar-static/ – Jun 24 '18 at 16:23
I have posted the answer if you like my answer please do upvote :) – stone rock Jun 25 '18 at 05:19

score 0 · Accepted Answer · answered Jun 25 '18 at 05:19

I have modified CSS file as follows:

.ct-pie-chart .ct-legend li.inactive:before {
  background: transparent;
}

.piechart-title {
  text-align: center;
}

.ct-pie-chart .ct-legend.ct-legend-inside li{
  display: inline-block;
}

.ct-pie-chart .ct-legend li {
  margin: 2%;
}

.mychart {
  display: flex;
  align-items: flex-start;
  margin-left: 40%;
}

.ct-pie-chart .ct-legend {
  float: right;
}

In my react component:

Parent component:

<div className="mychart">
     <Pie/>
</div>

Pie component:

render(){
    return(
         <div className="ct-pie-chart">
             {this.piechart}
         </div>
    )
}

Making above changes works fine and now the pie chart and legends do not overlap on each other.

How to style elements for responsive web design?

2 Answers2

Linked