Skip to contentSkip to footer

Lead Front End Developer Interview Questions

Salaries
Interviews

21,139 lead front end developer interview questions shared by candidates

Create a BarGraph component - The required interface for the componant is to accept the following props and render the UI in the image above: const DATA = [ { label: "A", value: 5 }, { label: "C", value: 2 }, { label: "B", value: 23 }, ]; const COLORS_PALETTE = ["#ff0000", "#ff8000", "#00ff80"]; Additional Requirements Graph Size - should be based on the width / height props (e.g. "100px", you can assume the provided values will be strings with px suffix). Graph Padding - A padding of 5px (vertical and horizontal) should exist between the graph-area's border and the columns. Column Height - Columns should indicate their value by their height, have a minimum height of 5px and the highest column value should fill the graph's height. Column Width Each column should have 8px of spacing to the columns near it, and they should fill the available graph width, while having a minimum width of 15px. Data points can be assumed to fit in the graph width. Data Points - Each data point has a label which is a single capital letter, and an non-negative number, e.g. { label: "A", value: 42 }. Labels - Should only be displayed for the X axis (under the graph), and not for the Y axis. Coloring - Column colors should be cyclic - first color for the first column, second for the second, and so on, until there are no more colors, and then the same order should be used again.
avatar

Senior Front End Developer

Interviewed at Claroty

4.2★
Feb 14, 2024

Create a BarGraph component - The required interface for the componant is to accept the following props and render the UI in the image above: const DATA = [ { label: "A", value: 5 }, { label: "C", value: 2 }, { label: "B", value: 23 }, ]; const COLORS_PALETTE = ["#ff0000", "#ff8000", "#00ff80"]; Additional Requirements Graph Size - should be based on the width / height props (e.g. "100px", you can assume the provided values will be strings with px suffix). Graph Padding - A padding of 5px (vertical and horizontal) should exist between the graph-area's border and the columns. Column Height - Columns should indicate their value by their height, have a minimum height of 5px and the highest column value should fill the graph's height. Column Width Each column should have 8px of spacing to the columns near it, and they should fill the available graph width, while having a minimum width of 15px. Data points can be assumed to fit in the graph width. Data Points - Each data point has a label which is a single capital letter, and an non-negative number, e.g. { label: "A", value: 42 }. Labels - Should only be displayed for the X axis (under the graph), and not for the Y axis. Coloring - Column colors should be cyclic - first color for the first column, second for the second, and so on, until there are no more colors, and then the same order should be used again.

Viewing 7681 - 7690 interview questions

Glassdoor has 21,139 interview questions and reports from Lead front end developer interviews. Prepare for your interview. Get hired. Love your job.