Chart Title & Subtitle

14 Sep 202314 minutes to read

Title

By using the title option, you can add the text as well as customize its border, background color and font.

JAVASCRIPT

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module ChartComponent {
    $(function () {
        var chartsample = new ej.datavisualization.Chart($("#chartcontainer"), {
             // ... 
             title: { 
                  //Adding text to chart title
                 text: 'Efficiency of oil-fired power production ', 
                  //Change the title text background color
                 background : "lightblue",
                  //Customizing Chart title border
                border: { 
                           color: "blue",
                           width: 2,
                           opacity: 0.5 ,
                           cornerRadius : 4
                         },
 
                  //Customizing Chart title font 
                 font:{ 
                         opacity: 1,
                         fontFamily: "Arial",
                         fontStyle: 'italic',
                         fontWeight: 'regular',
                         color: "#E27F2D",
                         size: '23px' 
                     },
               }, 
        // ... 

 });
});
}

We can trim, wrap and wrapAndTrim to the chart title using textOverflow property. The original text will be displayed as tooltip on mouse hover.

JAVASCRIPT

var chartsample = new ej.datavisualization.Chart($("#chartcontainer"), {
        {
            // ...

            title: {
                text: 'Efficiency of oil-fired power production ',
                 //To enable the title trim, wrap and wrapandtrim
                enableTrim: true,
                 //Setting maximum width to the title
                maximumWidth: 150,
                 //To trim the title
                textOverflow: "trim",
            },

            // ...

        });

Title Alignment

You can change the title alignment to center, far and near by using the textAlignment property of the chart title.

JAVASCRIPT

var chartsample = new ej.datavisualization.Chart($("#chartcontainer"), {
           
          //  ...
          
           title: {
                //Change title text alignment
                textAlignment: "near",
                //...
            }          

            //  ...   
      });

Add Subtitle to the chart

By using the subTitle option, you can add the subTitle to the chart title and customize its border, background color and font.

JAVASCRIPT

var chartsample = new ej.datavisualization.Chart($("#chartcontainer"), {
               
              // ... 
            title: {
                  // ... 
                 subTitle: { 
                           //Add subtitle to chart title 
                            text: "( in a week )", 
                          //Change the title text background color
                            background : "lightblue",
                          //Customizing Chart subtitle border
                            border: { 
                                      color: "blue",
                                      width: 2,
                                      opacity: 0.2 ,
                                      cornerRadius : 4
                           },

                           //Customizing Chart subtitle font 
                              font:{ 
                                     opacity: 1, 
                                     fontFamily: "Arial", 
                                     fontStyle: 'italic',
                                     fontWeight: 'regular', 
                                     color: "#E27F2D", 
                                     size: '12px' 
                                }, 
                              } 
                           } 
                  // ...
 });

We can trim, wrap and wrapAndTrim to the chart subtitle using textOverflow property. The original text will be displayed as tooltip on mouse hover.

JAVASCRIPT

var chartsample = new ej.datavisualization.Chart($("#chartcontainer"), {
         {
             // ...

             title: {

                 // ...
                 subTitle:{
                     text: '( in a week )', 
                     //To enable the sub-title trim, wrap and wrap and trim
                     enableTrim: true,
                     //Setting maximum width to the sub-title
                     maximumWidth: 50,
                     //To trim the sub-title
                     textOverflow: "wrap",
                 },
             },

             // ...

         });

Subtitle Alignment

You can change the subtitle alignment to center, far and near by using the textAlignment property of the subTitle.

JAVASCRIPT

var chartsample = new ej.datavisualization.Chart($("#chartcontainer"), {
    
        //  ...  
        title: {                
             // ...
             subTitle:{
                 //Change subtitle to text aligment
                 textAlignment: "center",		
                 // ...
               }
         }
            
            //  ...   
      });