Hey everyone! We’re excited to launch a new regular feature on our blog called JS Chart Tips. In this series, we’ll share some recent cases handled by our Support Team for users of our JavaScript charting library, highlighting both frequent questions and those unique solutions that shouldn’t remain hidden.
Whether these scenarios directly resonate with a challenge you’re facing or simply spark an idea for your current or future data visualization development tasks, we hope you’ll find valuable insights. Each entry will include code snippets and JS chart examples to illustrate the solutions. If you get additional questions or need more details, simply comment below or contact our Support Team directly. We’re here to help enhance your JavaScript charting experience!
Without further ado, welcome to the first edition of JS Chart Tips! Today, you’ll learn how to customize the font of the data grid header in a JavaScript Gantt chart.
Question: How to Change Font Size in Gantt Chart’s Data Grid Header?
Customization of texts in various elements of JavaScript charts is a frequent need. Recently, one of our customers reached out to our Support Team with a specific request: they wanted to adjust the font size of the label in the table header of a Gantt chart but could not get it to work and sought our guidance. The customer also attached a picture to illustrate exactly which text they wanted to customize, which looked like the following:
This situation inspired us to publicly demonstrate how you can personalize those texts in your own Gantt charts, and not just the size of the font. Let’s delve into how to do that.
Solution: Customizing Column Header Font in JS Gantt Chart
Overview
AnyChart provides numerous ways and options to customize texts. To adjust the font size of the text in the data grid header in a Gantt chart, use the title() method with the fontSize() method. You can also utilize fontColor() to change the font color or other methods from the anychart.core.ui.Title class depending on your needs.
In Detail
First, define which column’s title you want to customize. Data grid columns are numbered starting with 0. So, if you need to change the font in the second column, it will be column 1:
var column_2 = chart.dataGrid().column(1);Second, use the fontSize() method to configure the size of the font in that column:
column_2.title().fontSize(52);Here’s how code for data grid header customization can look:
// configure the title of the second data grid column
var column_2 = chart.dataGrid().column(1);
column_2.title().text("TASK");
column_2.title().fontColor("#64b5f6");
column_2.title().fontWeight(600);
column_2.title().fontSize(52);Example
Check out an example of a JS Gantt chart with a custom configuration of the font in the header of the second data grid column and feel free to experiment further with its code and visualization:
Further Learning
Learn more about formatting titles of the data grid columns of Gantt charts in the documentation:
Wrapping Up
If you have any questions or need further assistance, feel free to leave a comment or contact our Support Team directly.
Stay tuned for our JavaScript Chart Tips series as we’ll continue to share valuable insights and tricks.
Happy JavaScript charting!
- Categories: AnyChart Charting Component, AnyGantt, Business Intelligence, Gantt Chart, HTML5, JavaScript, JS Chart Tips, Tips and Tricks
- No Comments »