corporate profits

corporate-profits.markdown

corporate profits

Based on Doejo setup

A Pen by Elizabeth Shell on CodePen.

License.

index.html

<h1>Record-breaking corporate profits</h1>
<p><a href="https://docs.google.com/spreadsheets/d/1c2u-_T6_eNRf9hZBTTdWKDZC-B5M4XmfTLXIIdd6xtw/pubhtml">View the data</a>.</p>

<div id="containers">
    <div id="corp-profits"></div>
    <!--<div id="container2"></div>-->
</div>

script.js

$('#corp-profits').highcharts({
  
  chart: {
    defaultSeriesType: 'column',
    backgroundColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 1
                },
                stops: [
                    [0, '#2a2a2b'],
                    [1, '#3e3e40']
                ],
            plotBorderColor: '#606063'
           },
    },   
  
  data: {
    googleSpreadsheetKey: '1c2u-_T6_eNRf9hZBTTdWKDZC-B5M4XmfTLXIIdd6xtw',
    googleSpreadsheetWorksheet: 1,
    color: '#fff'
  },
  
  title: {
    text: 'Record corporate profits',
    style: {
      color: '#fff'      
    }
  },
  
  subtitle: {
      text: '10 largest quarterly in chronological order',
      style: {
        color: '#fff'
      }
    
  },
  
  
  xAxis: {
      labels: {
          rotation: 75,
          style: {
            color: '#E0E0E3'
          }
      },
    lineColor: '#707073',
    minorGridLineColor: '#505053'
    
  },
  
  legend: false,
  
  tooltip: {
    valuePrefix: '$',
    valueSuffix: ' billion'
    
  },
  
  
  yAxis: {
   labels: {
     formatter: function () {
                    return '$' + this.value + 'B';
                },
                style: {
                    color: '#fff'
                }
            },
   title: {
      text: 'Profit',
      style: {
        color: '#fff',
        fontSize: '14px'
      },
    },
    
  },
  
 
    series: [{
      color: '#E80C7A'
    }],
  
  
  credits: {
            enabled: false
        },
});

style.scss

body {
  padding: 20px;
}

#corp-profits {
    width: 100%;
    height: 400px; 
    float: left;
    margin: 0 1em 1em 0;
}