In order to dynamically display the title of the chart, I simply passed the props into the text. Then, in render, dataPoints is set equal to this.eachContributor(). In order to iterate through my array of objects, I created a function in the ContributionChart class called eachContributor which maps through the contributors prop, and returns a single data point. I also wanted the title's text to have a dynamic title depending on the props passed into it. I, however, needed my component to iterate through an array of objects, and then each of those objects would be a different 'dataPoint', which contained both a label and a y-coordinate.
Below, I will walk through how I implemented that code and used the chart as a component.īelow is a file tree that includes the relevant components needed for this chart:Ĭlass App extends Component */ / >
I felt that this information was best conveyed as a column chart. Once you determine what kind of chart is best for your project, you can read more about what is needed for the CanvasJS implementation here.įor a project I was recently working on, I wanted to show who a federal legislator's top financial contributors were. It's important to keep in mind that these are all suggestions, and therefore you may create a chart, only to realize that that it's not as easy to read and comprehend as it could be. There are a number of important points to keep in mind when deciding what kind of chart you should be using, which are summed up very succinctly by Dr. It is important to recognize that not all charts convey the same kind of information, nor do they all convey information equally effectively, depending on what kind of data you're using. There are many different kinds of charts you can implement using ChartJS, including line, area, column and bar, pie and funnel, financial, scatter and bubble, and box and whisker charts. The charts library enables users to generate graphs in formats including line, area, column, pie, doughnut, scatter, whisker and bubble, among other categories. You can find the content of those files by downloading CanvasJS's tutorial here, or you can find the code on my Github ( here for, and here for ). CanvasJS's interactivity functionality lets businesses reposition data points on a chart by dragging them across the plot area on the graphs. In your React application's src folder, create two files: and . In my project, I would pass down two props from to : an array of objects which are the contributors (and contains information including contributor name and amount contributed), and a string that is the candidate's name.
In this blog I will walk through how to implement CanvasJS in your React project. While there are a number of JS/React libraries that do data visualization, I came across CanvasJS, which I found to be easy to use and highly effective. Visually-representing data in charts and graphs brings color to a website, draws the user in, and breaks up what could otherwise be hard-to-follow text.
When working on a project that involves conveying data in a succinct, meaningful way, it can be very useful to include charts.