scatter chart pointRadius setting - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

scatter chart pointRadius setting

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

div {/*from w w  w.j  a va2  s  . c o m*/
   width: 500px;
   height: 500px;
}
canvas {
   position: absolute;
   left: 1;
   top: 1;
   display: inline-block;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
// Chart.js 2.0 Line Sample
var ctx = document.getElementById("chart").getContext("2d");
var data = {
  labels: ["sample1", "sample2", "sample3", "sample4", "sample5", "sample6", "sample7"],
  datasets: [{
    label: "Scatter diagram for parameters Cd, Co: ppb",
    radius: 15,
    pointBackgroundColor: "rgba(220,220,110,1)",
    pointBorderColor: "rgba(220,110,220,1)",
    pointHoverRadius: 15,
    backgroundColor: "rgba(220,220,110,1)",
    borderColor: "rgba(220,110,220,1)",
    data: [{
      x: 0.002000,
      y: 1.250000
    }, {
      x: 0.004500,
      y: 0.411000
    }, {
      x: 0.002000,
      y: 1.030000
    }, {
      x: 0.002000,
      y: 0.307000
    }, {
      x: 0.062000,
      y: 10.100000
    }, {
      x: 0.009200,
      y: 7.100000
    }, {
      x: 0.019300,
      y: 0.118000
    }]
  }]
};
var chart = new Chart(ctx, {
  type: 'scatter',
  data: data,
  options: {
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        label: function(tooltipItems, data) {
          return String(data.labels[tooltipItems.index]) + ': ' + String(tooltipItems.xLabel) + ', ' + String(tooltipItems.yLabel) + ' ppb';
        }
      }
    },
    showLines: false,
    scales: {
      xAxes: [{
        type: 'linear',
        display: true,
        position: 'bottom',
        scaleLabel: {
          display: true,
          labelString: 'ppb',
          fontSize: 12
        }
      }],
      yAxes: [{
        type: 'linear',
        display: true,
        position: 'left',
        scaleLabel: {
          display: true,
          labelString: 'ppb',
          fontSize: 12
        }
      }]
    }
  }
});
    }

      </script> 
   </head> 
   <body> 
      <div id="container"> 
         <canvas width="500" height="400" id="chart" style="z-axis: 0"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials