Chart Title & Subtitle

12 May 201713 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
  • "use strict";
                 // ... 
                 var 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' 
                         },
                   }; 
            // ... 
    		ReactDOM.render(
    			<EJ.Chart id="default_chart_sample_0"
    			title={title}
    			>        
                
    			</EJ.Chart>,
    				document.getElementById('chart')
    		);

    Click here to view the Chart Title online demo sample.

    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
  • "use strict";
                 // ... 
                 var 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",
                   }; 
            // ... 
    		ReactDOM.render(
    			<EJ.Chart id="default_chart_sample_0"
    			title={title}
    			>        
                
    			</EJ.Chart>,
    				document.getElementById('chart')
    		);

    Title Alignment

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

  • javascript
  • "use strict";
            // ... 
            var title= {                
    			//Change title text alignment
                textAlignment: "near",
                //...
            }; 
            // ... 
    		ReactDOM.render(
    			<EJ.Chart id="default_chart_sample_0"
    			title={title}
    			>        
                
    			</EJ.Chart>,
    				document.getElementById('chart')
    		);

    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
  • "use strict";
            // ... 
            var 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' 
                                }, 
                              } 
                           } 
                  // ... 
    		ReactDOM.render(
    			<EJ.Chart id="default_chart_sample_0"
    			title={title}
    			>        
                
    			</EJ.Chart>,
    				document.getElementById('chart')
    		);

    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
  • "use strict";
            // ...
    
            var 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",
                },
            };
            
            //  ...
    		ReactDOM.render(
    			<EJ.Chart id="default_chart_sample_0"
    			title={title}
    			>        
                
    			</EJ.Chart>,
    				document.getElementById('chart')
    		);

    Subtitle Alignment

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

  • javascript
  • "use strict";
            //  ...  
            var title= {                
                 // ...
                 subTitle:{
                     //Change subtitle to text aligment
                     textAlignment: "center",		
                     // ...
                   }
             };
                
            //  ... 
    		ReactDOM.render(
    			<EJ.Chart id="default_chart_sample_0"
    			title={title}
    			>        
                
    			</EJ.Chart>,
    				document.getElementById('chart')
    		);