{"id":12883,"date":"2025-07-23T07:44:14","date_gmt":"2025-07-23T07:44:14","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12883"},"modified":"2025-07-23T07:44:46","modified_gmt":"2025-07-23T07:44:46","slug":"convert-react-charts-function-component-to-class-component","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/convert-react-charts-function-component-to-class-component","title":{"rendered":"Convert react-charts Funtion Component Example to Class Component"},"content":{"rendered":"<p>Error: Invalid hook call. Hooks can only be called inside of the body of a function component. occurs because the original react-charts example uses React Hooks, which cannot be used inside class components.<\/p>\n<p>Here\u2019s a <strong>working class-based version<\/strong> that supports <strong>gradient colors<\/strong> for each line\/series, using renderSVG and getSeriesStyle.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { Chart } from \"react-charts\";\r\nimport jsonData from \".\/data.json\";\r\n\r\nclass GraphClub extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      data: jsonData,\r\n      axes: [\r\n        {\r\n          primary: true,\r\n          type: \"ordinal\",\r\n          position: \"bottom\"\r\n        },\r\n        {\r\n          type: \"linear\",\r\n          position: \"left\",\r\n          stacked: true\r\n        }\r\n      ]\r\n    };\r\n  }\r\n  getSeriesStyle(series) {\r\n    return {\r\n      color: `url(#${series.index % 4})`,\r\n      opacity: 1\r\n    };\r\n  }\r\n  render() {\r\n    const { data, axes } = this.state;\r\n    return (\r\n      &lt;div style={{ width: \"500px\", height: \"300px\" }}&gt;\r\n        &lt;Chart\r\n          data={data}\r\n          axes={axes}\r\n          getSeriesStyle={this.getSeriesStyle}\r\n          tooltip\r\n          renderSVG={() =&gt; (\r\n            &lt;defs&gt;\r\n              &lt;linearGradient id=\"0\" x1=\"0\" x2=\"0\" y1=\"1\" y2=\"0\"&gt;\r\n                &lt;stop offset=\"0%\" stopColor=\"#df4081\" \/&gt;\r\n                &lt;stop offset=\"100%\" stopColor=\"#42E695\" \/&gt;\r\n              &lt;\/linearGradient&gt;\r\n              &lt;linearGradient id=\"1\" x1=\"0\" x2=\"0\" y1=\"1\" y2=\"0\"&gt;\r\n                &lt;stop offset=\"0%\" stopColor=\"#df4081\" \/&gt;\r\n                &lt;stop offset=\"100%\" stopColor=\"#42E695\" \/&gt;\r\n              &lt;\/linearGradient&gt;\r\n              &lt;linearGradient id=\"2\" x1=\"0\" x2=\"0\" y1=\"1\" y2=\"0\"&gt;\r\n                &lt;stop offset=\"0%\" stopColor=\"#df4081\" \/&gt;\r\n                &lt;stop offset=\"100%\" stopColor=\"#42E695\" \/&gt;\r\n              &lt;\/linearGradient&gt;\r\n              &lt;linearGradient id=\"3\" x1=\"0\" x2=\"0\" y1=\"1\" y2=\"0\"&gt;\r\n                &lt;stop offset=\"0%\" stopColor=\"#df4081\" \/&gt;\r\n                &lt;stop offset=\"100%\" stopColor=\"#42E695\" \/&gt;\r\n              &lt;\/linearGradient&gt;\r\n            &lt;\/defs&gt;\r\n          )}\r\n        \/&gt;\r\n      &lt;\/div&gt;\r\n    );\r\n  }\r\n}\r\nexport default function App() {\r\n  return &lt;GraphClub \/&gt;;\r\n}\r\nconst rootElement = document.getElementById(\"root\");\r\nReactDOM.render(&lt;App \/&gt;, rootElement);\r\n<\/pre>\n<h3>Code Key Points:<\/h3>\n<ul>\n<li>renderSVG is used to define SVG gradients for each series.<\/li>\n<li>getSeriesStyle applies the corresponding gradient to each series via url(#gradient-{index}).<\/li>\n<li>This avoids React hooks entirely, making it 100% safe and compatible in class-based components.<\/li>\n<li>We can customize the colors in the stopColor as needed.<\/li>\n<\/ul>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/react-security-solutions\" target=\"_blank\">React Security<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Error: Invalid hook call. Hooks can only be called inside of the body of a function component. occurs because the original react-charts example uses React Hooks, which cannot be used inside class components. Here\u2019s a working class-based version that supports gradient colors for each line\/series, using renderSVG and getSeriesStyle. import React from &#8220;react&#8221;; import ReactDOM [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12883"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12883"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12883\/revisions"}],"predecessor-version":[{"id":12886,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12883\/revisions\/12886"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12884"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}