Chart Title & Subtitle

Title

By using the title option, you can add the text as well as customize its border, background color and font.
The visibility of the title is controlled by using the visibleproperty.

  • javascript
  • $("#container").ejChart({ 
    
                 // ... 
                 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' 
                         },
                   }, 
            // ... 
    
    });

    Title

    Click here to view the Chart Title online demo sample.

    We can trim, wrap and wrapAndTrim to the chart title using textOverflow property.
    To perform trim operation enableTrim property is used and text width is controlled by using the maximumWidth property.
    The original text will be displayed as tooltip on mouse hover.

  • javascript
  • $("#container").ejChart(
            {
                // ...
    
                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 Customization

    Title Alignment

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

  • javascript
  • $("#container").ejChart({
               
              //  ...
              
               title: {
                    //Change title text alignment
                    textAlignment: "near",
                    //...
                }          
    
                //  ...   
          });

    Title Alignment

    title border

    Options to customize the border of the title.

    title border width

    Width of the title border.

  • javascript
  • $("#container").ejChart({
               
              title:{ 
              border : { width:1}
          }  
          });

    title border color

    [color] (../api/ejchart#members:title-border-color)of the title border.

  • javascript
  • $("#container").ejChart({
               
              title:{ 
              border : { color: "black"}
          }  
          });

    title border opacity

    [opacity] (../api/ejchart#members:title-border-opacity)of the title border.

  • javascript
  • $("#container").ejChart({
               
             title:{ 
              border : { opacity: 1 }
          }  
          });

    title border cornerRadius

    cornerRadius of the title border.

  • javascript
  • $("#container").ejChart({
               
           title:{ 
              border : { cornerRadius: 2 }
          }     
          });

    title fontFamily

    Font family for Chart title.

  • javascript
  • $("#container").ejChart({
               
          title : { font : { fontFamily : "Algerian" } }   
          });

    title fontStyle

    Font style for Chart title.

  • javascript
  • $("#container").ejChart({
               
        title : { font : { fontStyle : "italic" } }               
          });

    title fontWeight

    Font weight for Chart title.

  • javascript
  • $("#container").ejChart({
               
        title : { font : { fontWeight : "lighter" } }              
          });

    title font opacity

    [Opacity] (../api/ejchart#members:title-font-opacity)of the Chart title.

  • javascript
  • $("#container").ejChart({
               
      title : { font : { opacity : 0.8 } }                   
          });

    title font size

    Font size for Chart title.

  • javascript
  • $("#container").ejChart({
               
      title : { font : { size : "22px" } }                
          });

    title maximum width

    MaximumWidth of the title, when the title exceeds this width, the title gets trimmed, when enableTrim is true.

  • javascript
  • $("#container").ejChart({
               
     title : { maximumWidth : 150 }                    
          });

    title text overflow

    TextOverflow specifies the action taken when the Chart width is more than the titleWidth.

  • javascript
  • $("#container").ejChart({
               
     title : { textOverflow : "trim" }                          
          });

    title subtitle font fontFamily

    FontFamily of sub title.

  • javascript
  • $("#container").ejChart({
               
     title: {subTitle : {font :{ fontFamily : "Algerian" } } }                               
          });

    title subtitle font fontStyle

    FontStylefor sub title.

  • javascript
  • $("#container").ejChart({
    
       title: { subTitle : {font :{ fontStyle : "Normal" } } }                     
    
    });

    title subtitle font fontWeight

    FontWeightfor sub title.

  • javascript
  • $("#container").ejChart({
    
       title: { subTitle : {font :{ fontWeight : "regular" } } }                    
    
    });

    ### title subtitle font opacity

    Opacity of the sub title.

  • javascript
  • $("#container").ejChart({
    
       title: { subTitle : {font :{ opacity : 0.5 } } }                   
    
    });

    title subtitle font size

    Font size for sub title.

  • javascript
  • $("#container").ejChart({
    
      title: { subTitle : {font :{ size : "14px" } } }                       
    
    });

    title subtitle background

    Background color for the chart subtitle.

  • javascript
  • $("#container").ejChart({
    
       title : {  subTitle:{ background : "red" } }                       
    
    });

    title subtitle border width

    Width of the subtitle border.

  • javascript
  • $("#container").ejChart({
    
       title:{ 
             subTitle:{ border : { width:1} }
          }                        
    
    });

    title subtitle border color

    color of the subtitle border.

  • javascript
  • $("#container").ejChart({
    
       title:{ 
             subTitle:{ border : { color: "black"}}
          }  
                                    
    
    });

    title subtitle border opacity

    opacity of the subtitle border.

  • javascript
  • $("#container").ejChart({
    
       title:{ 
            subTitle:{ border : { opacity: 1 } }
          }  
                                    
    
    });

    title subtitle border opacity

    opacity of the subtitle border.

  • javascript
  • $("#container").ejChart({
    
       title:{ 
            subTitle:{ border : { opacity: 1 } }
          }  
                                    
    
    });

    title subtitle border cornerRadius

    cornerRadius of the subtitle border.

  • javascript
  • $("#container").ejChart({
    
       title:{ 
           subTitle:{  border : { cornerRadius: 2 } }
          }  
                                    
    
    });

    title subtitle text

    Text to be displayed in sub title.

  • javascript
  • $("#container").ejChart({
    
       title:{ 
           title: { subTitle: { text : "Performance chart" } } 
          }  
                                    
    
    });

    title subtitle visible

    Controls the visibility of the Chart SubTitle

  • javascript
  • $("#container").ejChart({
    
       title:{ 
           title :{ subTitle: { visible : false }  }     
          }  
                                    
    
    });

    title subtitle maximum width

    Maximum width of the Subtitle, when the Subtitle exceeds this width, the Subtitle gets trimmed, when enableTrim is true.

  • javascript
  • $("#container").ejChart({
    
       title:{ 
          title : { subTitle: { maximumWidth : 150 }  }    
          }  
                                    
    
    });

    title subtitle text overflow

    text overflow specifies the action taken when the Chart width is more than the SubTitleWidth.

  • javascript
  • $("#container").ejChart({
    
       title:{ 
         title : { subTitle: { textOverflow : "trim" }  }  
          }  
                                    
    
    });

    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
  • $("#container").ejChart({
                   
                  // ... 
                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' 
                                    }, 
                                  } 
                               } 
                      // ...
     });

    SubTitle

    We can trim, wrap and wrapAndTrim to the chart title using textOverflow property.
    To perform trim operation enableTrim property is used and text width is controlled by using the maximumWidth property.
    The original text will be displayed as tooltip on mouse hover.

  • javascript
  • $("#container").ejChart(
             {
                 // ...
    
                 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 Customization

    Subtitle Alignment

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

  • javascript
  • $("#container").ejChart({
        
            //  ...  
            title: {                
                 // ...
                 subTitle:{
                     //Change subtitle to text alignment
                     textAlignment: "center",		
                     // ...
                   }
             }
                
                //  ...   
          });

    SubTitle Alignment