react-chartjs-2#Polar JavaScript Examples

The following examples show how to use react-chartjs-2#Polar. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: polarchart.js    From gedge-platform with Apache License 2.0 6 votes vote down vote up 
render() {
        const data = {
            datasets: [{
                data: [
                    11,
                    16,
                    7,
                    18
                ],
                backgroundColor: [
                    "#f46a6a",
                    "#34c38f",
                    "#f1b44c",
                    "#556ee6"
                ],
                label: 'My dataset', // for legend
                hoverBorderColor: "#fff"
            }],
            labels: [
                "Series 1",
                "Series 2",
                "Series 3",
                "Series 4"
            ]
        };

        return (
            <React.Fragment>
                <Polar width={474} height={300} data={data}/>
            </React.Fragment>
        );
    }
Example #2
Source File: PolarChart.js    From indeplot with GNU General Public License v3.0 6 votes vote down vote up 
export function PolarChart(props) {

  function generateGraph() {
    const colorVal = `rgba(${props.color.r},${props.color.g},${props.color.b},${props.color.a})`;
    return {
      labels: props.labels,
      datasets: [
        {
          label: props.title,
          fill: false,
          lineTension: 0.5,
          backgroundColor: colorVal,
          borderColor: 'rgba(0,0,0,1)',
          borderWidth: 2,
          data: props.data
        }
      ]
    }
  }

  return (
    <Polar data={generateGraph} />)
}
Example #3
Source File: index.js    From gobench with Apache License 2.0 5 votes vote down vote up 
ChartsChartjs = () => {
  return (
    <div>
      <Helmet title="Charts / Chartjs" />
      <div className="kit__utils__heading">
        <h5>
          <span className="mr-3">Charts / Chartjs</span>
          <a
            href="http://www.chartjs.org/"
            rel="noopener noreferrer"
            target="_blank"
            className="btn btn-sm btn-light"
          >
            Official Documentation
            <i className="fe fe-corner-right-up" />
          </a>
        </h5>
      </div>
      <div className="card">
        <div className="card-body">
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Line Chart</strong>
              </h5>
              <div className="mb-5">
                <Line data={lineData} options={lineOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Bar Chart</strong>
              </h5>
              <div className="mb-5">
                <Bar data={barData} options={barOptions} width={400} height={200} />
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Radar Chart</strong>
              </h5>
              <div className="mb-5">
                <Radar data={radarData} options={radarOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Polar Area Chart</strong>
              </h5>
              <div className="mb-5">
                <Polar data={polarData} options={polarOptions} width={400} height={200} />
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Pie Chart</strong>
              </h5>
              <div className="mb-5">
                <Pie data={pieData} options={pieOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Doughnut Chart</strong>
              </h5>
              <div className="mb-5">
                <Doughnut data={doughnutData} options={doughnutOptions} width={400} height={200} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
Example #4
Source File: Charts.js    From id.co.moonlay-eworkplace-admin-web with MIT License 4 votes vote down vote up 
render() {
    return (
      <div className="animated fadeIn">
        <CardColumns className="cols-2">
          <Card>
            <CardHeader>
              Line Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Line data={line} options={options} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Bar Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Bar data={bar} options={options} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Doughnut Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Doughnut data={doughnut} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Radar Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Radar data={radar} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Pie Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Pie data={pie} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Polar Area Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Polar data={polar} options={options}/>
              </div>
            </CardBody>
          </Card>
        </CardColumns>
      </div>
    );
  }