{"id":3889,"date":"2021-10-14T20:48:17","date_gmt":"2021-10-14T20:48:17","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3889"},"modified":"2023-01-21T00:31:40","modified_gmt":"2023-01-21T05:31:40","slug":"building-with-stencil-bar-chart","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-with-stencil-bar-chart","title":{"rendered":"Building with Stencil: Bar Chart"},"content":{"rendered":"

Creating a Bar Chart Web Component with Stencil<\/h2>\n

There are a number of very robust charting libraries on the market. Some are commercial. Some are free. You should use them. Every once in a while though, you need to roll your own. Not to worry! With a splash of SVG and helping hand from Stencil<\/a>, you can create a chart as a web component for all to use.<\/p>\n

<\/p>\n

The Array of Data<\/h3>\n

Most chart libraries can get pretty complex. Most of that has to do with abstracting how data is represented. Those abstractions are what make the library so useful in so many cases. In this case however, we are not building a library for all the cases, we are building a bar chart to meet our specific case. This can simplify our work dramatically.<\/p>\n

According to Wikipedia, in a bar chart “One axis of the chart shows the specific categories being compared, and the other axis represents a measured value.” According to me, a bar chart is an array of numbers. Let us start there, with some SVG and an array of numbers.<\/p>\n

import { Component, h, Prop } from '@stencil\/core';\n\n@Component( {\n  tag: 'ionx-chart',\n  styleUrl: 'chart.css',\n  shadow: true\n} )\nexport class Chart {\n  render() {\n    return (\n      <svg width="320" height="240"><\/svg>\n    );\n  }\n\n  \/\/ Values to use in the chart\n  @Prop() data: Array<number> = [];  \n}\n<\/code><\/pre>\n
Each number<\/code> in the Array<\/code> is going to take up the same amount of space along one of the axes. For this example, we will use the horizontal axis. The horizontal axis is 320<\/code> pixels across. If we get ten (10) values in the Array<\/code>, each bar will take up 32<\/code> pixels.<\/p>\n
The Maximum Ratio<\/h3>\n
Believe it or not, we are almost there. The last piece of information we need to know before we can render the chart is the largest (maximum) value (number) in the Array<\/code>. We need to know the maximum because we are looking to establish a ratio. We want the maximum value in the Array<\/code> to equal the available number of pixels we have along the vertical axis.<\/p>\n
private ratio: number = 1;\n<\/code><\/pre>\n
For example, if the values in the array are all larger than the 240<\/code> pixels we have along the vertical axis, how do we render the bar? Let us say the maximum value in the Array<\/code> is 1,000<\/code>. The available space we have 240<\/code> divided by the maximum value of 1,000<\/code> gives us a ratio of 240:1,000<\/code> or 0.24<\/code>. Now we can multiply any number<\/code> in the Array<\/code> by 0.24<\/code>, and we will know the height of the bar and<\/strong> that bar will fit in our viewable area.<\/p>\n
\n  Do not believe me? Let us say that the next number<\/code> in the Array<\/code> is 500<\/code>. The value of 500<\/code> is half of 1,000<\/code>. If 1,000<\/code> equals all our vertical pixels (240<\/code>),  then 500<\/code> should equal half our vertical pixels, or 120<\/code>. Ready for this? 500 * 0.24 = 120<\/code><\/p><\/blockquote>\n
The Will Render<\/h3>\n
Before we render the data<\/code> we will need a place to figure out that maximum value and corresponding ratio. The best place for that from a Stencil perspective is in componentWillRender()<\/code>, which is called before each render.<\/p>\n
componentWillRender() {\n  let maximum: number = 0;\n\n  \/\/ Find the largest value\n  for( let d: number = 0; d < this.data.length; d++ )\n    maximum = Math.max( maximum, this.data[d] );\n\n  \/\/ Round up to nearest whole number\n  \/\/ Assign the ratio\n  maximum.= Math.ceil( maximum );\n  this.ratio = 240 \/ maximum;\n}\n<\/code><\/pre>\n
It should become pretty clear, pretty quickly, that the limiting factor of our chart, and indeed any chart, is the amount of data to render. Not because rendering takes a long time, but because figuring out the edges of our data does. This is why supercomputers have to be used for weather maps, when all you see is some colored splotches.<\/p>\n
A bar chart however, is not a weather map. We can do all this processing (and a considerable amount more) right here in the browser.<\/p>\n
The Render<\/h3>\n
Now we have all the pertinent pieces of information, we need to put those bars on the screen! A bar in SVG is a rect<\/code>. The rect<\/code> needs to know where it is positioned (x<\/code>, y<\/code>)  and its dimensions (width<\/code>, height<\/code>).<\/p>\n
The height<\/code> we already know will be the value (number) in this iteration of the data<\/code> multiplied by the ratio<\/code> we calculated earlier. We also talked about how the width<\/code> of each bar is the amount of space we have along the horizontal axis (320<\/code>) divided by the number of values in the data<\/code>. We do not know how many values that will be, so we calculate it inline.<\/p>\n
The x<\/code> position is almost identical, except we multiply the width<\/code> by the index<\/code> of the iteration. If the width<\/code> is 50<\/code> pixels, the first iteration (index === 0<\/code>) will result in x<\/code> being zero (0). Yes, please! The next iteration (index === 1<\/code>) multiplied by a width<\/code> of 50<\/code> places x<\/code> at 50<\/code>. Exactly!<\/p>\n
render() {\n  return (\n    <svg width="320" height="240">\n      {this.data.map( ( value: number, index: number ) =>\n        <rect \n          fill={`rgb( \n            ${Math.floor( Math.random() * 255)}, \n            ${Math.floor( Math.random() * 255)},\n            ${Math.floor( Math.random() * 255)} \n          )`}\n          x={( 320 \/ this.data.length )  * index}\n          y={240 - ( value * this.ratio )}\n          width={320 \/ this.data.length}\n          height={value * this.ratio} \/>\n      ) }\n    <\/svg>\n  );\n}\n<\/code><\/pre>\n
The only one that is a little tricky in SVG-land is the y<\/code> position. When we think of the Web, we generally think of the top-left of the screen as being (0, 0<\/code>) on the coordinate system.  In the case of SVG however (0, 0<\/code>) is at the bottom left.<\/p>\n
This means that if we placed y<\/code> at 240<\/code> and then said the height<\/code> of the rect<\/code> was 100<\/code>, the resulting rect<\/code> would actually be drawn off the SVG viewport (from 240<\/code> to 340<\/code>). In order to offset this, we subtract the calculated height<\/code> using our ratio<\/code>, from the height<\/code> of the viewable area of the SVG.<\/p>\n
In order to see each bar, the fill<\/code> is a randomly generated CSS rgb()<\/code> value. This kind of begs the question “Maybe the bar should be abstracted into a class that includes fill color?” Yup! And congratulations on coming full circle – that is exactly what the charting libraries do; abstract all the things. How far you go with it is up to you.<\/p>\n
\u270b But What About …<\/h3>\n
There are two examples included in the running demonstration<\/a>, and the GitHub repository<\/a>. One example is the chart that we have just created. The other example is a chart that includes many of the typical considerations you might find in a chart.<\/p>\n