jsGraph

Selected point styles

You may use different point to point selection styles. The setStyle takes a string as second or third argument to which your specific style has been assigned

Call the selection using serie.selectPoint( pointIndex, "yourSpecificStyleName") to select it with your style or serie.unselectPoint to go back in the unselected mode

Source code

var graphinstance = new Graph( domGraph );

var modificators = [];

var serie = graphinstance.newSerie( "serieTest", {}, 'scatter' )
  .setLabel( "My serie" )
  .autoAxis()
  .setData( series[ 0 ] )
  .setStyle( {
    shape: 'circle',
    r: 2,
    fill: 'rgba(255, 0, 0, 0.3)',
    stroke: 'rgb(255, 100, 0)'
  } )
  .setStyle( {
      stroke: 'green',
      fill: 'rgba(20, 255, 40, 0.5)',
      transform: 'scale(2, 2)'
    },
    "selected"
  )
  .setStyle( {
      stroke: 'blue',
      fill: 'rgba(20, 250, 255, 0.5)',
      transform: 'scale(2, 2)'
    },
    "hover"
  )
  .setStyle( {
      stroke: 'orange',
      fill: 'rgba(220, 255, 40, 0.5)',
      transform: 'scale(5, 5)'
    },
    "specialSelection"
  );

serie.on( "mouseout", function( index ) {
  serie.unselectPoint( index );
} );

serie.on( "mouseover", function( index ) {
  serie.selectPoint( index, "hover" );
} );

graphinstance.redraw();
graphinstance.drawSeries();

serie.selectPoint( 100, "specialSelection" );

var index, lastIndex;
window.setInterval( function() {

  if ( lastIndex ) {
    serie.selectPoint( lastIndex, false ); // Unselect
  }

  index = Math.round( Math.random() * ( series[ 0 ].length / 2 - 1 ) );

  serie.selectPoint( index );
  lastIndex = index;

}, 1000 );