Change point color in linechart

Change point color in linechart

  

It is possible to change point color in linechart when I pass the mouse over the point?

Hi Filipe,

Yes, you will need to pass an event handler to the 'AdvancedFormat' input parameter.

You can reference this documentation for all the different options: http://api.highcharts.com/highcharts/plotOptions.area.point.events.mouseOver

As well as this StackOverflow to see how someone implemented something similar to what you want to do:

http://stackoverflow.com/questions/34575870/highcharts-how-to-change-line-color-when-hovering-a-scatterplot-series

Let me know if you have any trouble,

Justin

I put this in advanced format:


plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function () {
                        var chart = this.series.chart;
                        if (!chart.lbl) {
                            chart.lbl = chart.renderer.label('')
                                .attr({
                                    padding: 10,
                                    r: 10,
                                    fill: Highcharts.getOptions().colors[1]
                                })
                                .css({
                                    color: '#ff0000'
                                })
                                .add();
                        }
                        chart.lbl
                            .show()
                            .attr({
                                text: 'x: ' + this.x + ', y: ' + this.y
                            });
                    }
                }
            },

and chart didn't appear. How can I adapt this in my chart?

Hi Filipe,

Is there errors in the browser console? Can you share the OML so I can take a quick look?

I noticed the comma at the end of the JSON, not sure if thats whats causing the issue.

Let me know,

Justin

I have this in advance format:

AdvancedFormat_Init(DataPointFormats:AdvancedDataPointFormats,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:"
chart: {
    "+If(zoomType<>"" and IsConvertingToPDF = False,"zoomType: '"+zoomType+"'"+If(LegendPointsWithLabel <> "" or IsConvertingToPDF,",",""),"")+"
    "+If(LegendPointsWithLabel <> "","marginRight: 150"+If(IsConvertingToPDF,",",""),"")+"
    "+If(IsConvertingToPDF,"marginTop: 10","")+"
},
colors: ['#0000ff','#00cd00','#ffa500','#a020f0','#cd3700',
        '#00868b','#ee30a7','#87ceeb','#6495ed','#8b8b00','#ff8247','#9fb6cd'],
xAxis: {
    tickmarkPlacement: 'on',
    minRange: 5
},
/*
//Isto permite controlar a quantidade de eixo que ha antes do ponto de menor valor e depois do ponto de maior valor
yAxis: {
    endOnTick: false,
    maxPadding: 0.1,
    minPadding: 0.1
    

},
*/

"+If(EnableLineVisibilityToggling and IsConvertingToPDF = False,"
legend: {
    itemStyle: {
       cursor: 'pointer'
    }
},","")+"

plotOptions: {
    series: {
        shadow: "+ToLower(BooleanToText(RenderShadow))+",
        states:{
            hover:{ lineWidth: 3 }
        point: {
                events: {
                    mouseOver: function () {
                        var chart = this.series.chart;
                        if (!chart.lbl) {
                            chart.lbl = chart.renderer.label('')
                                .attr({
                                    padding: 10,
                                    r: 10,
                                    fill: Highcharts.getOptions().colors[1]
                                })
                                .css({
                                    color: '#ff0000'
                                })
                                .add();
                        }
                        chart.lbl
                            .show()
                            .attr({
                                text: 'x: ' + this.x + ', y: ' + this.y
                            });
                    }
                }
            }        

          },

        "+If(EnableLineVisibilityToggling and IsConvertingToPDF = False,"
        events: {
            legendItemClick: function () {
            return; // <== returning false will cancel the default action
            },            
        },","")+"

        "+If(DataPointsAreMarkedInGraph <> 0,"
        marker: {
            enabled: true,
            fillColor: '#FFFFFF',
            lineWidth: 2,
            lineColor: null, // inherit from series
            symbol: 'circle',
            states: { 
                enabled: true,
                hover:{ radius:7 }
            }
        }","")+"
    }
},

tooltip: {
    enabled: true,
    shared: "+ToLower(BooleanToText(SharePointsTooltip))+",
    useHTML: true,


    /*valueDecimals: 2,*/

    "+If(SharePointsTooltip,"

    formatter: function () {
                var s = '<b>'+ "+If(XAxisIsDate,"Highcharts.dateFormat('%Y-%m-%d', this.x)", "this.x")+" +'</b>';
                
                $.each(this.points, function(i, point) {
                    s += '<table style=""width: 100%;""><tr><td style=""color: '+point.series.color+'"">'+point.series.name+': </td>' +
                '<td style=""text-align: right""><b>'+point.y+'"+If(DataValuesUnitLabel<>""," "+DataValuesUnitLabel,"")+"</b></td></tr></table>';
                });
                
                return s;
            },

    crosshairs: true,
    crosshairs: {
        width: 1,
        color: 'gray',
        dashStyle: 'shortdot'
    }",
    "formatter: function () {
        if (this.point.tooltip) {
            return this.point.tooltip;
        } else {
            return ((this.series.name != ' ') ? this.series.name + ', ' : '') + "+If(XAxisIsDate,"Highcharts.dateFormat('%Y-%m-%d', this.x)", "this.x")+" + ': <b>' + Highcharts.numberFormat(this.y, -1) + '"+If(DataValuesUnitLabel<>""," "+DataValuesUnitLabel,"")+"</b>';
        }
    }")+"
},

exporting: {
    enabled: "+ToLower(BooleanToText(EnableExporting))+"
}
")

Is there some error?

Thanks for the help.

I put more two  }  }  before of the last  }, but it didn't result.