{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/chart","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"5cac0e0d-2c85-52dc-9f59-23ff583dab42","title":"Charts","slug":"/contrast/react/chart"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Charts\",\n  \"metaTitle\": \"Chart Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building a Chart Component using the Contrast Bootstrap React Package\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Charts\"), mdx(\"p\", null, \"Charts represent data inform of graphs making them more comprehensible. Charts come in different forms: bar, line, pie, radar, polar and more.\"), mdx(\"h2\", null, \"Line Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/9HDtKg0.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Line chart</h3>\\n              <Line data={this.state.dataRadar} options={{ responsive: true }} />\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Dynamically Refreshed Line chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/O30EnRU.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Dynamically Refreshed Line chart</h3>\\n              <Line data={this.state.data} options={{ responsive: true }} />\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Scatter Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/BlOe1mV.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n              <h3 className=\\\"mt-5\\\">Scatter chart</h3>\\n              <Scatter data={this.state.dataBubble} options={{ responsive: true }}/>\\n            </CDBContainer>\\n            <CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Bubble Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/7aLsM7g.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Bubble chart</h3>\\n              <Bubble data={this.state.dataBubble} options={{ responsive: true }} />\\n            </CDBContainer>\\n            <CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Bar Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/8zqswzF.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n              <h3 className=\\\"mt-5\\\">Bar chart</h3>\\n              <Bar data={this.state.dataRadar} options={{ responsive: true }} />\\n            </CDBContainer>\\n            <CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Horizontal Bar Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/ldHGhNw.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Horizontal Bar chart</h3>\\n              <HorizontalBar data={this.state.dataRadar} options={{ responsive: true }}/>\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Dynamically Refreshed Bar Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/HA9U93y.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Dynamicly Refreshed Bar chart</h3>\\n              <Bar data={this.state.data} options={{ responsive: true }} />\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Pie Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/cRrFtIE.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Pie chart</h3>\\n              <Pie data={this.state.dataRadar} options={{ responsive: true }} />\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Doughnut Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/BzCOS7U.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Doughnut chart</h3>\\n              <Doughnut data={this.state.dataRadar} options={{ responsive: true }} />\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Dynamically Refreshed Doughnut Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/Gx1LcLU.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Dynamicly Refreshed Doughnut chart</h3>\\n              <Doughnut data={this.state.data} options={{ responsive: true }} />\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Polar Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/dk13E08.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Polar chart</h3>\\n              <Polar data={this.state.dataRadar} options={{ responsive: true }} />\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")), mdx(\"h2\", null, \"Radar Chart\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/rTzZkzJ.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { Radar, Line, Pie, Doughnut, Bar, HorizontalBar, Polar, Bubble, Scatter, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Chart = () => {\\n  return (\\n    <CDBContainer>\\n    const initialState = {\\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\\n        datasets: [\\n          {\\n            label: 'My First dataset',\\n            fill: false,\\n            lineTension: 0.1,\\n            backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n            borderColor: 'rgb(194, 116, 161)',\\n            borderCapStyle: 'butt',\\n            borderDash: [],\\n            borderDashOffset: 0.0,\\n            borderJoinStyle: 'miter',\\n            pointBorderColor: 'rgba(75,192,192,1)',\\n            pointBackgroundColor: '#fff',\\n            pointBorderWidth: 1,\\n            pointHoverRadius: 5,\\n            pointHoverBackgroundColor: 'rgba(71, 225, 167, 0.5)',\\n            pointHoverBorderColor: 'rgb(71, 225, 167)',\\n            pointHoverBorderWidth: 2,\\n            pointRadius: 1,\\n            pointHitRadius: 10,\\n            data: [65, 59, 80, 81, 56, 55, 40]\\n          }\\n        ]\\n    };\\n\\n    class ChartsPage extends React.Component {\\n\\n      constructor() {\\n        super();\\n        this.state = {\\n          data: {},\\n          dataRadar: {\\n            labels: [\\n              \\\"Eating\\\",\\n              \\\"Drinking\\\",\\n              \\\"Sleeping\\\",\\n              \\\"Designing\\\",\\n              \\\"Coding\\\",\\n              \\\"Cycling\\\",\\n              \\\"Running\\\",\\n            ],\\n            datasets: [\\n              {\\n                label: \\\"My First dataset\\\",\\n                backgroundColor: \\\"rgba(194, 116, 161, 0.5)\\\",\\n                borderColor: \\\"rgb(194, 116, 161)\\\",\\n                data: [65, 59, 90, 81, 56, 55, 40],\\n              },\\n              {\\n                label: \\\"My Second dataset\\\",\\n                backgroundColor: \\\"rgba(71, 225, 167, 0.5)\\\",\\n                borderColor: \\\"rgb(71, 225, 167)\\\",\\n                data: [28, 48, 40, 19, 96, 27, 100],\\n              },\\n            ],\\n          },\\n          dataBubble: {\\n            labels: ['Bubble'],\\n            datasets: [\\n              {\\n                label: 'My First dataset',\\n                fill: false,\\n                lineTension: 0.1,\\n                backgroundColor: 'rgba(194, 116, 161, 0.5)',\\n                borderColor: 'rgb(194, 116, 161)',\\n                borderCapStyle: 'butt',\\n                borderDash: [],\\n                borderDashOffset: 0.0,\\n                borderJoinStyle: 'miter',\\n                pointBorderColor: 'rgba(194, 116, 161, 0.5)',\\n                pointBackgroundColor: '#fff',\\n                pointBorderWidth: 1,\\n                pointHoverRadius: 5,\\n                pointHoverBackgroundColor: 'rgba(75,192,192,1)',\\n                pointHoverBorderColor: 'rgba(220,220,220,1)',\\n                pointHoverBorderWidth: 2,\\n                pointRadius: 1,\\n                pointHitRadius: 10,\\n                data: [\\n                  { x: 65, y: 75 },\\n                  { x: 75, y: 12 },\\n                  { x: 89, y: 54 },\\n                  { x: 94, y: 23 },\\n                  { x: 59, y: 49 },\\n                  { x: 80, y: 90 },\\n                  { x: 81, y: 29 },\\n                  { x: 56, y: 36 },\\n                  { x: 55, y: 25 },\\n                  { x: 40, y: 18 },\\n                ]\\n              }\\n            ]\\n          },\\n        };\\n      }\\n\\n      componentWillMount() {\\n        this.setState({data: initialState});\\n      }\\n      componentDidMount(){\\n\\n        var _this = this;\\n\\n        setInterval(function(){\\n          var oldDataSet = _this.state.data.datasets[0];\\n          var newData = [];\\n\\n          for(var x=0; x< _this.state.data.labels.length; x++){\\n            newData.push(Math.floor(Math.random() * 100));\\n          }\\n\\n          var newDataSet = {\\n            ...oldDataSet\\n          };\\n\\n          newDataSet.data = newData;\\n\\n          var newState = {\\n            ...initialState,\\n            datasets: [newDataSet]\\n          };\\n\\n          _this.setState({data: newState});\\n        }, 5000);\\n      }\\n\\n      render() {\\n        return (\\n          <>\\n            <CDBContainer>\\n              <h3 className=\\\"mt-5\\\">Radar chart</h3>\\n              <Radar data={this.state.dataRadar} options={{ responsive: true }} />\\n            </CDBContainer>\\n          </>\\n        );\\n      }\\n    }\\n    </CDBContainer>\\n  );\\n};\\nexport default  Chart;\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#charts","title":"Charts","items":[{"url":"#line-chart","title":"Line Chart"},{"url":"#dynamically-refreshed-line-chart","title":"Dynamically Refreshed Line chart"},{"url":"#scatter-chart","title":"Scatter Chart"},{"url":"#bubble-chart","title":"Bubble Chart"},{"url":"#bar-chart","title":"Bar Chart"},{"url":"#horizontal-bar-chart","title":"Horizontal Bar Chart"},{"url":"#dynamically-refreshed-bar-chart","title":"Dynamically Refreshed Bar Chart"},{"url":"#pie-chart","title":"Pie Chart"},{"url":"#doughnut-chart","title":"Doughnut Chart"},{"url":"#dynamically-refreshed-doughnut-chart","title":"Dynamically Refreshed Doughnut Chart"},{"url":"#polar-chart","title":"Polar Chart"},{"url":"#radar-chart","title":"Radar Chart"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/chart.mdx"},"frontmatter":{"metaTitle":"Chart Component for Contrast Bootstrap React","metaDescription":"Building a Chart Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"5cac0e0d-2c85-52dc-9f59-23ff583dab42"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}