Nutmeg Plundering Muse

    gatsby-plugin-charts-css

    1.0.0 • Public • Published

    gatsby-plugin-charts-css

    A Gatsby Plugin that wraps the Charts.css project for easy use in Gatsby

    Setup

    yarn add gatsby-plugin-charts-css

    Add to your site's gatsby-config.js.

    module.exports = {
      plugins: [`gatsby-plugin-charts-css`]
    };

    How to use

    See the charts.css README for full documentation.

    Simple example.

    demo/src/pages/index.js

    import React from 'react';
    
    import './styles.css';
    
    const IndexPage = () => {
      return (
        <main>
          <h1>Index Page</h1>
          <div>
            <table className="charts-css column" id="my-chart">
              <caption> Front End Developer Salary </caption>
    
              <tbody>
                <tr>
                  <td style={{ '--size': 'calc( 40 / 100 )' }}> $40K </td>
                </tr>
                <tr>
                  <td style={{ '--size': 'calc( 60 / 100 )' }}> $60K </td>
                </tr>
                <tr>
                  <td style={{ '--size': 'calc( 75 / 100 )' }}> $75K </td>
                </tr>
                <tr>
                  <td style={{ '--size': 'calc( 90 / 100 )' }}> $90K </td>
                </tr>
                <tr>
                  <td style={{ '--size': 'calc( 100 / 100 )' }}> $100K </td>
                </tr>
              </tbody>
            </table>
          </div>
        </main>
      );
    };
    
    export default IndexPage;

    demo/src/pages/styles.css

    html,
    body {
      font-family: 'system-ui';
    }
    
    #my-chart.column {
      height: 200px;
      max-width: 300px;
      margin: 0 auto;
    }

    Install

    npm i gatsby-plugin-charts-css

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    2.38 kB

    Total Files

    4

    Last publish

    Collaborators

    • pauliescanlon