CODEWITHSUNDEEP
highcharts
usert4jju7
usert4jju7

Reputation: 1813

Highcharts - Should Is use data labels or annotation or something else and how?

I have built a stock chart using Highcharts. A few blocks from a massive dataset containing years worth of data looks like below -

 {
    Date: "2018-02-16",
    Open: 0.6406,
    Close: 0.6697,
    High: 0.6697,
    Low: 0.6406,
    Adjusted_close: 0.5538,
    Volume: 284808,
    Entry_type: "B"
  },
  {
    Date: "2020-01-15",
    Open: 1.02,
    Close: 1.02,
    High: 1.04,
    Low: 1.02,
    Adjusted_close: 0.9508,
    Volume: 209591,
    Entry_type: "S"
  }

What I'm trying to do is display a circle or balloon or square or whatever shape containing either B or S based on the value of Entry_type.

I've spent quite sometime trying to understand the examples from Highcharts website. Unfortunately I am not able to make a connection from the examples to my particular use case.

Please could someone help me out here?

Upvotes: 0

Views: 287

Answers (1)

Core972
Core972

Reputation: 4114

This is possible using the render function API Link

    chart: {
        events: {
            render: function() {
                try {
                    this.series[0].data.forEach(point => {
                        if (point.Entry_type === "B") {
                            point.dataLabel.attr({y: point.plotLow});
                        } else if (point.Entry_type === "S") {
                            point.dataLabel.attr({y: point.plotHigh - 20});
                        }
                    });
                } catch (error) {
                    // continue
                }
            }
        }
    },
...
    series: [{
        dataLabels: {
            enabled: true,
            backgroundColor: "#fdfc59",
            shape: "circle",
            formatter: function () {
                return this.point.Entry_type;
            }
...

Edited Fiddle

Edit 3 full example

Full Codepen

Upvotes: 1

Related Questions