--- id: 587d7fa8367417b2b2512bc9 title: Update the Height of an Element Dynamically challengeType: 6 forumTopicId: 301493 dashedName: update-the-height-of-an-element-dynamically --- # --description-- The previous challenges covered how to display data from an array and how to add CSS classes. You can combine these lessons to create a simple bar chart. There are two steps to this: 1) Create a `div` for each data point in the array 2) Give each `div` a dynamic height, using a callback function in the `style()` method that sets height equal to the data value Recall the format to set a style using a callback function: `selection.style("cssProperty", (d) => d)` # --instructions-- Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string `px` added to it. # --hints-- The first `div` should have a `height` of `12` pixels. ```js assert($('div').eq(0)[0].style.height === '12px'); ``` The second `div` should have a `height` of `31` pixels. ```js assert($('div').eq(1)[0].style.height === '31px'); ``` The third `div` should have a `height` of `22` pixels. ```js assert($('div').eq(2)[0].style.height === '22px'); ``` The fourth `div` should have a `height` of `17` pixels. ```js assert($('div').eq(3)[0].style.height === '17px'); ``` The fifth `div` should have a `height` of `25` pixels. ```js assert($('div').eq(4)[0].style.height === '25px'); ``` The sixth `div` should have a `height` of `18` pixels. ```js assert($('div').eq(5)[0].style.height === '18px'); ``` The seventh `div` should have a `height` of `29` pixels. ```js assert($('div').eq(6)[0].style.height === '29px'); ``` The eighth `div` should have a `height` of `14` pixels. ```js assert($('div').eq(7)[0].style.height === '14px'); ``` The ninth `div` should have a `height` of `9` pixels. ```js assert($('div').eq(8)[0].style.height === '9px'); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```