JavaScript Chart

Set the crosshairsColor property of the jqxChart. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='chartContainer' style="width:850px; height:500px;" />

JavaScript

var sampleData = [{
    Day: 'Monday',
    Cycling: 65
  },
  {
    Day: 'Tuesday',
    Swimming: 70
  },
  {
    Day: 'Wednesday',
    Running: 55
  }
];
// prepare jqxChart settings
var settings = {
  showLegend: true,
  source: sampleData,
  xAxis: {
    dataField: 'Day',
    unitInterval: 1,
    axisSize: 'auto',
    tickMarks: {
      visible: true,
      interval: 1,
      color: '#BCBCBC'
    },
    gridLines: {
      visible: true,
      interval: 1,
      color: '#BCBCBC'
    }
  },
  valueAxis: {
    unitInterval: 10,
    minValue: 0,
    maxValue: 120,
    tickMarks: {
      color: '#BCBCBC'
    }
  },
  colorScheme: 'scheme06',
  seriesGroups: [{
    type: 'column',
    columnsGapPercent: 50,
    seriesGapPercent: 0,
    series: [{
        dataField: 'Running',
        displayText: 'Running',
        color: "#FF0000"
      },
      {
        dataField: 'Swimming',
        displayText: 'Swimming',
        color: "#00FF00"
      },
      {
        dataField: 'Cycling',
        displayText: 'Cycling',
        color: "#0000FF"
      }
    ]
  }]
};
// setup the chart
$('#chartContainer').jqxChart(settings);