Vanilla bars with numbers #78
Conversation
…9-2020 into vanilla-bars-num
| const value = document.createElementNS(SVG_NS, 'text'); | ||
| g.append(value); | ||
| value.setAttribute('class', 'bar-value'); | ||
| value.setAttribute('x', 3 * GRAPH_LEFT_PADDING); | ||
| value.setAttribute('y', barContainerHeight * i + barThickness); | ||
| value.setAttribute('text-anchor', 'middle'); | ||
| value.fill = 'white'; | ||
| value.textContent = chartValues[i]; |
There was a problem hiding this comment.
not sure if this is the best way to format the svg number within the svg rects.
I do it by setting the coordinates. Other advice is appreciated!
There was a problem hiding this comment.
Nice. LGTM.
I don't think there's any particular way to make the numbers look 'nicer'. You could prevent the text from appearing horizontally squished by calculating the distortion that is being applied to the SVG, and then applying the inverse distortion to the text (i.e., the SVG is square by default but is forced into a rectangle by your CSS, this is what makes the text look squished).
| const barTextContainer = document.getElementById('bar-text'); | ||
| const category = document.createElement('div'); | ||
| barTextContainer.appendChild(category); | ||
| category.setAttribute('class', 'category'); | ||
| category.textContent = chartCategories[i]; | ||
|
|
There was a problem hiding this comment.
nit: remove extra newline
| @@ -39,6 +39,10 @@ | |||
| fill: var(--color-accent-special); | |||
| } | |||
|
|
|||
| .bar-value { | |||
| fill: #FF69B4 ; | |||
There was a problem hiding this comment.
nit: remove space before semicolon and add a comment indicating the color that this value evaluates to ("purple")
| @@ -60,3 +71,5 @@ GENRE_ANALYSIS.then((genreAnalysisInfo) => { | |||
| Object.keys(genreAnalysisInfo.genreData), | |||
| genreAnalysisInfo.maxGenreCount); | |||
| }); | |||
|
|
|||
| // createBarChart([2,1], ["hello", "bye"], 2) | |||
There was a problem hiding this comment.
this should be removed
| @@ -39,6 +39,10 @@ | |||
| fill: var(--color-accent-special); | |||
| } | |||
|
|
|||
| .bar-value { | |||
| fill: #FF69B4 ; | |||
There was a problem hiding this comment.
Use a darker value like #943b68 to improve contrast.
(also I will change the number color to be more aesthetically pleasing)