Make Responsive Titles In charts? - Javascript highcharts

Javascript examples for highcharts:Chart Title

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Title

Description

Make Responsive Titles In charts?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Responsive Chart Demo - Title</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script> 
      <style id="compiled-css" type="text/css">

.highcharts-title {
   font-weight: bold;


      </style> 
      <script type="text/javascript">
var redrawEnabled = true;/*  w  ww.  j  a v a2  s. com*/
$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    },
    title: {
      text: "Factor Exposure",
      margin: 10,
      align: 'center',
      verticalAlign: 'middle',
    },
    tooltip: {
      pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
      }
    },
    series: [{
      type: 'pie',
      data: [{
        name: 'Item',
        y: 81.52,
        sliced: true,
        selected: true
      }, {
        name: 'Item',
        y: 2.91,
      }, {
        name: 'Item',
        y: 4.07
      }, {
        name: 'Item',
        y: 2.07
      }, {
        name: 'Item',
        y: 9.44
      }],
      innerSize: '50%',
    }]
  });
function doResize() {
    var chart = $('#container').highcharts();
    var w = $('#container').closest(".wrapper").width()
    console.log('redraw');
    chart.setSize(
      w, w * (3 / 4), false
    );
    chart.title.update({
      style: {
        fontSize: Math.round(chart.containerWidth / 30) + "px"
      }
    });
  };
  $(window).resize(doResize);
   doResize();
});

      </script> 
   </head> 
   <body> 
      <div class="wrapper"> 
         <div id="container" style="width:100%;height:100%;"></div> 
      </div>  
   </body>
</html>

Related Tutorials