Highcharts with data from table, how to add custom marker for specific value from specific series?

Question

I have a highcharts line chart with the data source being an HTML table.

I want to add a custom marker for a specific marker on a specific series to indicate a break even point.

My highcharts js:

    $(function () {
        var chart = new Highcharts.Chart({
          colors: ["#cc1c0d", "#1d63af" , "#9eb215"],
          chart: {
          type: 'line',
          backgroundColor:'rgba(255, 255, 255, 0.85)',
          renderTo: 'container'
         },
         data: {
              table: 'sheet6'
          },
          title: {
              text: 'Cost Comparison'
          },
          xAxis: {
              tickInterval:3,
              title: {
                  text: 'M'
              },
          },
          plotOptions: {
                series: {
                    marker: {
                        symbol: 'circle',
                        radius: 3,
                        fillColor: '#FFFFFF',
                        lineWidth: 2,
                        lineColor: null // inherit from series
                },
                    shadow: true
                }
            },
          yAxis: {
              allowDecimals: false,
              title: {
                  text: 'Cost'
              },
              labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value,0);
                    }
                }
          },
          credits: {
              enabled: false
          },
          tooltip: {
              headerFormat: '{series.name}
',
              pointFormat: 'Month {point.x}: {point.y} kUSD'
          },

      });
  });

And here is a sample of the data in the table:


        
        
        
        
        
          
            M
            M
            A
            Profit/Loss
          
          
            0
            0
            0
            0
          
          
            1
            119
            551
            -432
          
          
            2
            238
            717
            -479
          
          
            3
            357
            860
            -504
          
          
            4
            476
            980
            -504
          
          
            5
            595
            991
            -396
          
          
            6
            713
            1002
            -288
          
          
            7
            832
            1012
            -180
          
          
            8
            951
            1023
            -72
          
          
            9
            1070
            1034
            37
          
          
            10
            1189
            1044
            145
          
          
            11
            1308
            1055
            253
          
          
            12
            1427
            1066
            361
          
          
            13
            1546
            1077
            469
          
          
            14
            1665
            1087
            578
          
          
            15
            1784
            1098
            686
          
          
            16
            1903
            1109
            794
          
          
            17
            2022
            1119
            902
          
          
            18
            2140
            1130
            1010
          
          
            19
            2259
            1141
            1119
          
          
            20
            2378
            1152
            1227

I have seen a number of examples to add a custom marker, but my JS differs from them and so I am unsure where to add the custom marker in the code.

All the examples that I have seen have had their data embedded in the highcharts js. But my data comes from a table.

Update 1:

I have created a fiddle: https://jsfiddle.net/partisanentity/n5gaf26o/

If you look at the blue series (Automated) it begins to intersect with the red series (Manual) at month 8. I want to add a custom marker to the blue series at month 8.

The indication for the break even (intersection) will not come from the table. It will come from a different part of my code that uses PHP.

All I need to know is where in my example do I need to add this and how?

Kacper Madej · Accepted Answer

Parsing your data in the data's complete function in chart's options and setting marker settings should resolve the issue.

Marker options can be set per point, e.g. when point is given as object - example: jsfiddle.net/25ed2gb3

Highcharts with data from table, how to add custom marker for specific value from specific series?

Answers (1)

Related Questions