fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Making labels stick to the X axis

Hi, I'm trying to create a stock chart with a P/L (profit and loss) total on the X Axis. I've added a link below with a graphic of the ultimate goal.

As a user moves in and out form the chart I'd like the label to stay at the bottom of the chart.

https://imgur.com/a/cWJ05Tq

Ultimately I'm trying to add a fair amount of information (complexity) to the label/annotation layer.

Is there any documentation on making the label layer more complex?

Thanks!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making labels stick to the X axis

Hi there,

Good to hear from you!

To make things simple - creating a fixed text label is simple. I have included it in our previous demo in lines 49 - 73.
That is a very simple, hardcoded text with fixed x, y coordinates.
DEMO: https://jsfiddle.net/BlackLabel/nqev2wam/

Since you were asking about more complex labels, I'd suggest doing two things. Firstly, carefully inspect the annotations property in our API, I'm sure you will find some useful options for you such as the formatter property. Secondly, take a look at the demo with dynamic label data.
Dynamic data: https://jsfiddle.net/BlackLabel/uek80d3L/

I hope that this information will guide you in the right direction, but in case of any questions feel free to contact us anytime,
Have a good day!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making labels stick to the X axis

Hi K!

Thanks for the quick response. I did try the simple solution but it doesn't manage what I need. Mainly because the series in my charts starts in the 90s and goes into the low hundreds, so the label pinned at 1 is not easily seen.

I was looking for some kind of coordinate that works with the ccs container or the X axis label. That way I can keep the label in frame.

Not sure if the legends could be put to use?


// Forth label
{
verticalAlign: 'bottom',
align: 'right',
borderWidth: 0,
point: {
x: Date.UTC(2022, 04, 09,13,30),
y: 1,
xAxis: 0,
yAxis: 0,
},
text: "Roll to invert <br>Jul 15 (49d) | {y} <br> C - STO | -0.60" ,
},
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making labels stick to the X axis

I'm trying to use flags but I can't seem to get them to show up.

I'm not getting any errors and the rest of the chart is showing up. I'm guessing I'm missing some kind of initialization?


{
type: 'flags',
name: 'Highcharts',
color: '#333333',
shape: 'circlepin',
data: [
{ x: Date.UTC(2021, 11, 15,14,30), text: 'Copy for P/L', title: 'Stock - label', shape: 'squarepin' },
{ x: Date.UTC(2021, 12, 15,14,30), text: 'Gauges, polar charts and range series', title: '2.3'},
],
showInLegend: false
},
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making labels stick to the X axis

Hi!

Sorry, I didn't take into account that your chart will not start at zero. But, instead of using x, y coordinates in your annotations labels, you can also use x, y pixel values (starting from the top left corner of the chart). To achieve that, simply remove xAxis: 0, yAxis: 0 from the label property.

Take a look at the modified demo, where I have changed just the first label to show you the difference in behavior between them.
DEMO: https://jsfiddle.net/BlackLabel/amhbzpdq/

Also remember, that you can use Highcharts SVGRenderer, to draw/write literally anything in any place on the chart. Here are some references to it:

https://jsfiddle.net/gh/get/library/pur ... r-on-chart
https://jsfiddle.net/gh/get/library/pur ... erer-basic
https://jsfiddle.net/gh/get/library/pur ... o/renderer

I will refer to flags in a separate post below to keep these two solutions separate.
Kamil Musiałowski
Highcharts Developer
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making labels stick to the X axis

When it comes to adding flags, first of all, they only do work if a Highstock.js is imported (i.e in HTML) and have to be included inside the series property as another series. I have copied your flag series to the demo, and it's working fine (just changed the date to display it on my dataset) - so the config is perfect, maybe check if you are using the Highstock.js module.

DEMO: https://jsfiddle.net/BlackLabel/uh9243zo/
Docs: https://www.highcharts.com/docs/stock/flag-series

Please compare this code to yours and tell me if you've managed to fix the flags issue,
Best regards!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making labels stick to the X axis

Great info! I will use one of the many solutions in here.

Thank you!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making labels stick to the X axis

Don't forget to let me know how that worked, and in case of any questions feel free to contact us,

Good luck!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making labels stick to the X axis

Hi K,

I'm trying to implement the label but the date, an x co-ordinate is not working for me is not working for me.

I set the Y to 1,000 and it stays within the container, but I can't get the x to work. It puts the label all the way to the right of the container.

Code: Select all

      {   draggable: 'y',
                labels: [
                {
                    align: 'right',
                    borderwidth: 0,
                    point: {
                        x: Date.UTC(2021, 10, 31,13,30),
                        y: 1000,
                    },
                    text: "P/L DAY -$52.80  <br> P/L open $120<br>P/L YTD: $560"

                },
            ]}, 

I'm also trying the flags, I'm not getting errors but the flags are not showing up.

You can check out the work in progress https://cubicmobile.com/charts/index-js.html

The js is here https://cubicmobile.com/charts/50K-style-anno.js
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making labels stick to the X axis

I worked out the flags. I needed to put the flags in with the series [ ]
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making labels stick to the X axis

Hi there,

Good to know that you have managed to fix the flags yourself!

It's hard to fix the problem without a demo in a code editor, but I think I might have a solution for you.

When using labels, you have to specify the x, y coordinates - that's easy.
By default, they are pixel values relative to the top left corner. To change that behavior, you can specify an axis - and then use x or y point coordinates.

So in your case, if you want to use the x value as an axis coordinate, not a pixel coordinate, you need to specify which axis you would like to use as a relative point.
If you only have one xAxis, then it will be a number 0.
If you want to set y parameter with pixels, then leave it as it is.

I know it might sound a bit confusing, but please take a look at this code snippet to get a better understanding.

Code: Select all

      {   draggable: 'y',
                labels: [
                {
                    align: 'right',
                    borderwidth: 0,
                    point: {
                        x: Date.UTC(2021, 10, 31,13,30),
                        y: 1000,
                        xAxis: 0
                    },
                    text: "P/L DAY -$52.80  <br> P/L open $120<br>P/L YTD: $560"

                },
            ]}, 

​If you have any further inquiries, you may reach out to us at any time,
Regards!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making labels stick to the X axis

I tried adding an xAxis variable but it didn't work for me.

I tried building a fiddle version but I can't get that to work either...

https://jsfiddle.net/EstebanTheMagnificent/sh5vpq2j/31/

It's a two steps back kind of day
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making labels stick to the X axis

Don't worry about it, we all face those days sometimes :)

First of all, you were missing an annotations module import in HTML.
Also, you've made a minor mistake in your demo (line 58), first annotation. You used point instead of points, and didn't put them in an array (just like in second annotation).

Other than that, everything works fine!

Take a look at the fixed demo, is it what you wanted to achieve or the labels issue still occurs?
DEMO: https://jsfiddle.net/BlackLabel/x2knjbo3/

Regards!
Kamil Musiałowski
Highcharts Developer
fresh_ny
Posts: 25
Joined: Wed Jul 06, 2022 4:33 pm

Re: Making labels stick to the X axis

doh! importing the annotation module! I think I'm getting it!

https://jsfiddle.net/EstebanTheMagnificent/a4n79oer/39/

Is there away to make the label attached to the x axis drag up and down? I'm sure I saw it happen but then it stopped working
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Making labels stick to the X axis

Sure thing, we can attach the labels to other annotations.

Annotations are an array of objects. Each object has its own properties, shapes, labels, dragging options, etc. So to "connect" a label with a shape, simply put them in one object.

You can do countless combinations of that:

Code: Select all

annotations: [{label, shape}, {shape}, {shape}, {label}, {shape, shape}]
That way, when you drag the first annotations (so the first object) you will drag them both at the same time.

Take a look at the demo: https://jsfiddle.net/BlackLabel/xcfLwtps/

Let me know if that's what you wanted to achieve,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”