I have the chart module installed and am using a Drupal view to create the bar chart that uses Billboard.js. For the chart design, I want to increase the font size of the labels. If I do that with CSS, parts of the labels get hidden as the chart area doesn't adjust. How do I increase the label font size as the chart is getting rendered? I am assuming I can alter the chart in a custom module, but what do I include in the module to bind to the chart that the view creates using billboard.js and make those styling adjustments?
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | Screenshot from 2024-07-17 15-53-21.png | 140.68 KB | debdeep.mukhopadhyay |
| #7 | charts_billboard_bar-chart-labelSizeIncrease.png | 305.86 KB | fogpuddle |
| #5 | Screenshot from 2024-07-11 17-42-17.png | 326.21 KB | debdeep.mukhopadhyay |
| #5 | Screenshot from 2024-07-11 17-43-17.png | 329.4 KB | debdeep.mukhopadhyay |
| charts_billboard_bar-chart.png | 43.5 KB | fogpuddle |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
compare
Comments
Comment #2
debdeep.mukhopadhyay commentedComment #3
debdeep.mukhopadhyay commentedComment #4
debdeep.mukhopadhyay commentedComment #5
debdeep.mukhopadhyay commentedIf you want to increase font size of the label, you have to pick specific class for the label. After writing the custom CSS, you need to clear the cache & reload the page, only then this changes will be visible... (N.B- sometimes changes in inspect element is not work properly)
Comment #6
debdeep.mukhopadhyay commentedComment #7
fogpuddle commentedThank you for your response @innoraftDebdeep. I am not getting the same result after increasing the font size of the labeling to 20px. The labeling gets cut off on the left and the font leading isn't increased. I also noticed in the source code in your screenshot that the label text was split out by s. I'm not getting that same result.
Each bar is a paragraph type with a label field and a number value filed that gets pulled into a view that makes the chart.
Attached is a screenshot showing what I'm seeing.
Comment #8
debdeep.mukhopadhyay commentedYou can try
.tick text tspan {
font: 36px sans-serif !important;
}
this code.But you have to change bb-axis-x and bb-axis-y both lavel font size should be same and you can't difine different class name for the both lavel you need to use one code which reflect on the both section just like my code.
Comment #9
nikathoneNot sure if I am missing something but the fork doesn't contain new codes. I also switched the version to latest chart version and I think this means that the fork might need to be rebased.