You get a bonus - 1 coin for daily activity. Now you have 1 coin

Highcharts. Installation and a configuration example

Practice



Highcharts is a JavaScript library for data visualisation with flexible configuration in JSON format. It lets you display data as various types of charts.

 
 
 
1 First you need to include the core file
 
  <head> <script src="http://code.highcharts.com/highcharts.js"></script> 

2 the body must contain a block in which the charts will be rendered

 

  <div id="blockChart"></div>

 

3. then create a js file with the config and the initialisation (renderer) of the chart

for example

 

 

 

var chartOptions = 
  { 
    chart: { renderTo: 'blockChart',  type: 'bar' },
     series: [{ data: ['2020', '2021'] }] 
  }; 
 
  Highcharts.Chart(chartOptions);

An example of detailed configuration: say you need to output data dynamically in Highcharts tooltips — here is how you can do it

 

   ***

 

lang: {
thousandsSep: ' '
}

tooltip: {
headerFormat: '{point.key}',pointFormat: '' +'', footerFormat: '
{series.name}: {point.y} c.u.
',
shared: false,
useHTML: true,
valueDecimals: 0,
/*valuePrefix: '$',*/
/* valueSuffix: ' USD'*/

},



Highcharts.setOptions({
tooltip: {
valueDecimals: 2,
valuePrefix: '$',
valueSuffix: ' USD'
}
});

Comments

To leave a comment

If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Lectures and tutorial on "Scripting client side JavaScript, jqvery, BackBone"

Terms: Scripting client side JavaScript, jqvery, BackBone