Title

Title element of Chart
Class: Chart.Title()
Title Class represents a Title of a Chart. We can add many Titles in a Chart


Code using Title Class
                                    var chart = new Cosfire.Chart("chart-div",{width:500,
                                           height:300});

/* Create instance of Titles */
var title1 = new Chart.Title({text: 'Main Title', fontSize:44});
var title2 = new Chart.Title('Subtitle');
var title3 = new Chart.Title({ text: 'Subtitle', fontSize: 12 });

/* Add the titles to chart */
chart.titles.add(title1);
chart.titles.add(title2);
chart.titles.add(title3);

var data = [{
             plotAs: 'column',
             points: [
                     {y: 15, xLabel: "A"},
                     {y: 15, xLabel: "B"},
                     {y: 26, xLabel: "C"},
                     {y: 55, xLabel: "D"},
                     {y: 42, xLabel: "E"},
                     {y: 70, xLabel: "F"},
                     {y: 50, xLabel: "G"},
                     {y: 95, xLabel: "H"}
                     ]
            }
 ];

chart.setData(data);
chart.render();
Using JSON Approach
                                    var chartJSON = { 
    width: 500,
    height: 300,
    titles :[{ text: 'Main Title', fontSize:44 }, 
             { text: 'Subtitle' },
             { text: 'Subtitle', fontSize: 12 }],
    data: [{plotAs: 'column',
            points: [{ y: 15, xLabel: "A" },
                     { y: 15, xLabel: "B" },
                     { y: 26, xLabel: "C" },
                     { y: 55, xLabel: "D" },
                     { y: 42, xLabel: "E" },
                     { y: 70, xLabel: "F" },
                     { y: 50, xLabel: "G" },
                     { y: 95, xLabel: "H" }]
          }]
 };
                                    
var chart = new Cosfire.Chart("chart-div", chartJSON);
chart.render();

List of Properties Supported in Title.


Title Properties
Property Type Default Possible Values Description
text String auto Any positive number Text of the title.
hAlign String center • left • center • right Horizontal Alignment of the Title.
vAlign String center • top • center • bottom Vertical Alignment of the Title.
margin Array(Number) [0,5,5,0] [left, top, right, bottom] Margin of the title. All values must be defined in the array.
background String white Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. code Background of the chart.
fontSize Number 24 Number > 0 Size of the font in pixel.
fontColor String #000000 Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. The fontColor property is used to set the color of the text.
fontStyle String normal
  • normal
  • italic
  • oblique
 Style of the title font.
fontFamily String Arial
  • Arial
  • Verdana
  • Helvetica
  • Tahoma
  • Trebuchet MS
  • Times New Roman
  • Georgia
  • Garamond
  • Courier New
  • Brush Script MT
 Any browser supported font family or installed google font.
fontWeight String normal
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 ---