scatter datapoint color markerColor … all failed

• February 20, 2020 at 8:54 am #28432
  
  locnguyen

  I created a scatter chart with all blue color.

  I want to change color of single data-point by click event for highlight the selection.

  However, the color and any other settings only affect on highlight mode when mouseover.

  Is it a bug or I have made any mistake.

  For example: (I borrowed the jsfiddle code from other and modified to show my problem)

  var chart = new CanvasJS.Chart(“chartContainer”, {
  title:{
  text: “Click to Highlight the dataPoint”
  },
  data: [
  {
  type: “scatter”,
  click: highlightDataPoint,
  highlightEnabled: true,
  dataPoints: [
  { y: 4181563, indexLabel: “PlayStation 3” },
  { y: 2175498, indexLabel: “Wii” },
  { y: 3125844, indexLabel: “Xbox 360” },
  { y: 1176121, indexLabel: “Nintendo DS”},
  { y: 1727161, indexLabel: “PSP” },
  { y: 4303364, indexLabel: “Nintendo 3DS”},
  { y: 1717786, indexLabel: “PS Vita”}
  ]
  }
  ]
  });
  chart.render();

  function highlightDataPoint(e) {
  e.dataPoint.color = “blue”;
  e.dataPoint.markerColor = “red”;
  e.dataPoint.markerBorderColor = “red”;
  e.dataPoint.markerSize = 20;
  console.log(e.dataPoint);
  }

  February 20, 2020 at 9:29 am #28433
  
  locnguyen

  solved.

  My stupid.
  I forgot to re-render the chart.

  February 20, 2020 at 5:57 pm #28436
  
  Manoj Mohan

  @locnguyen,

  Glad that you figured it out :)

  —-
  Manoj Mohan
  Team CanvasJS