Chart Title & Subtitle

6 Jun 202313 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')
		);