Chart Title & Subtitle

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",		
                     // ...
                   }
             }
                
                //  ...   
          });