{"id":17615,"date":"2024-08-20T05:42:39","date_gmt":"2024-08-20T05:42:39","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17615"},"modified":"2024-08-20T18:29:18","modified_gmt":"2024-08-20T18:29:18","slug":"gantt-chart-data-grid-header-font","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/08\/20\/gantt-chart-data-grid-header-font\/","title":{"rendered":"JavaScript Gantt Chart with Custom Data Grid Header Font \u2014 JS Chart Tips"},"content":{"rendered":"

\"A<\/a>Hey everyone! We\u2019re excited to launch a new regular feature on our blog called JS Chart Tips<\/a>. In this series, we\u2019ll share some recent cases handled by our Support Team<\/a> for users of our JavaScript charting library<\/a>, highlighting both frequent questions and those unique solutions that shouldn\u2019t remain hidden.<\/p>\n

Whether these scenarios directly resonate with a challenge you\u2019re facing or simply spark an idea for your current or future data visualization development tasks, we hope you\u2019ll find valuable insights. Each entry will include code snippets and\u00a0JS 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\u2019re here to help enhance your JavaScript charting experience!<\/p>\n

Without further ado, welcome to the first edition of JS Chart Tips! Today, you\u2019ll learn how to customize the font of the data grid header in a JavaScript Gantt chart<\/a>.<\/p>\n

<\/p>\n

Question:\u00a0How to\u00a0Change\u00a0Font Size in Gantt Chart’s Data Grid Header?<\/h2>\n

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:<\/p>\n

\"Sketch<\/p>\n

This situation inspired us to publicly demonstrate how you can personalize those texts in your own Gantt charts, and not\u00a0just the size of the font. Let’s delve into how to do that.<\/p>\n

Solution:\u00a0Customizing Column Header Font in JS Gantt Chart<\/h2>\n

Overview<\/h3>\n

AnyChart provides numerous ways and options to customize texts.<\/a>\u00a0To adjust the font size of the text\u00a0in the data grid header in a Gantt chart, use the title()<\/code> method with\u00a0the fontSize()<\/code> method. You can also\u00a0utilize\u00a0fontColor()<\/code> to change the font color or other methods\u00a0from the anychart.core.ui.Title<\/a> class\u00a0depending\u00a0on your needs.<\/p>\n

In Detail<\/h3>\n

First, define which\u00a0column’s\u00a0title 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<\/code>:<\/p>\n

var column_2 = chart.dataGrid().column(1);<\/code><\/pre>\n
Second, use the\u00a0fontSize()<\/code>\u00a0method to configure the size of the font in that column:<\/p>\n
column_2.title().fontSize(52);<\/code><\/pre>\n
Here’s how code for data grid header customization\u00a0can look:<\/p>\n
\/\/ configure the title of the second data grid column\r\nvar column_2 = chart.dataGrid().column(1);\r\ncolumn_2.title().text(\"TASK\");\r\ncolumn_2.title().fontColor(\"#64b5f6\");\r\ncolumn_2.title().fontWeight(600);\r\ncolumn_2.title().fontSize(52);<\/code><\/pre>\n
Example<\/h3>\n
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:<\/p>\n
    \n
  • JS Gantt Chart with Customized Data Grid Header Text | AnyChart Playground<\/a><\/li>\n<\/ul>\n
    \"JS<\/a><\/p>\n
    Further Learning<\/h2>\n
    Learn more about formatting\u00a0titles of the\u00a0data grid columns of Gantt charts in the documentation:<\/p>\n
      \n
    • Title \u2014 Columns \u2014 Data Grid \u2014 Gantt Chart | AnyChart JS Documentation<\/a><\/li>\n<\/ul>\n
      Wrapping Up<\/h2>\n
      If you have any questions or need further assistance, feel free to leave a comment or contact our\u00a0Support Team<\/a>\u00a0directly.<\/p>\n
      Stay tuned for our\u00a0JavaScript Chart Tips<\/a>\u00a0series as we’ll continue to share valuable\u00a0insights and tricks.<\/p>\n
      Happy JavaScript charting!<\/strong><\/p>\n