javascript - How to color point in HighCharts -
hey know if want color specific point, can using fillcolor
attribute of current marker.
but when hover point, color return default color of graph,how can prevent such effect?
i want point red in both situation(onhover event , not onhover event),
what attribute per point need change effect happen?
i have added demo below, demo act this: when click canvas of graph,a new graph being generated , first point red when hover , return default color.
$(function () { $('#container').highcharts({ chart: { type: 'spline', margin: [70, 50, 60, 80], events: { click: function (e) { // find clicked values , series var x = e.xaxis[0].value, y = e.yaxis[0].value, series = this.series[0]; var chart = this; this.addseries({ data: [{ x:x, y:y, marker:{radius: 5 , fillcolor: "red" }},{x:(x*2), y:(y*2)}] }) } } }, title: { text: 'user supplied data' }, subtitle: { text: 'click plot area add point. click point remove it.' }, xaxis: { gridlinewidth: 1, minpadding: 0.2, maxpadding: 0.2, maxzoom: 60 }, yaxis: { title: { text: 'value' }, minpadding: 0.2, maxpadding: 0.2, maxzoom: 60, plotlines: [{ value: 0, width: 1, color: '#808080' }] }, legend: { enabled: false }, exporting: { enabled: false }, plotoptions: { series: { linewidth: 1, point: { events: { 'click': function () { if (this.series.data.length > 1) { this.remove(); } } } } } }, series: [{ data: [[20, 20], [80, 80]] }] }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
add in states option setting marker fillcolor:
marker: { radius: 5, fillcolor: 'red', states: { hover: { fillcolor: 'red', } } }
Comments
Post a Comment