eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Customize current datetime indicator

Hi
can we change current date time indicator to be like the one in image?
time.JPG
time.JPG (8.57 KiB) Viewed 1508 times
Also in date can we remove fullstop after 6
date.JPG
date.JPG (9.23 KiB) Viewed 1503 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Customize current datetime indicator

Hello,

To format the date, please use xAxis.currentDateIndicator.label.format. All of the available date formats can be found in the link below.

API Reference: https://api.highcharts.com/gantt/xAxis. ... bel.format
Date formats: https://api.highcharts.com/class-refere ... dateFormat
DEMO: https://jsfiddle.net/BlackLabel/21hxtja0/

To create the triangle on top of the date time indicator, I have modified the prototype of a function that is responsible for drawing the indicator. What I've done is just adding a custom symbol with Highcharts.SVGRenderer on top of the original SVG path.

DEMO: https://jsfiddle.net/BlackLabel/712eq98z/

Let me know what are your thoughts about this solution,
Best regards!
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Customize current datetime indicator

marker: 'triangle-down', not supported in angular it seems?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Customize current datetime indicator

It should be supported since it's a part of Highcharts library. Please try other symbols like 'circle', 'square','diamond', 'triangle' and tell me how that went. We will find a workaround for that.

Regards!
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Customize current datetime indicator

its not about symbol it is not supporting marker attribute
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Customize current datetime indicator

Unfortunately I won't be able to do much without looking at the code.
You can always delete the marker property from the config and from the wrap, and draw it manually.

Instead of rendering a symbol, render a path.

https://api.highcharts.com/class-refere ... VGRenderer
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Customize current datetime indicator

can you provide angular implementation of the same fiddle
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Customize current datetime indicator

You probably get a TS error, because marker is a custom property that does not normally exist on the current date indicator. Remove the marker property and use this as your wrap.

Code: Select all

(function(H) {
  H.wrap(H.PlotLineOrBand.prototype, 'render', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    var chart = this.axis.chart,
      options = this.options,
      marker = options.marker;

    var color = options.color,
      radius = 1,
      xAxis = chart.xAxis[0],
      x = chart.xAxis[0].toPixels(options.value),
      y = chart.plotTop;

    chart.renderer.path(['M', x, y, 'L', x, y - 8]).attr({
      'stroke-width': 1,
      stroke: color,
    }).add();

    chart.renderer.symbol('triangle-down', x - 5, y - 8, 10, 10).attr({
      fill: color
    }).add();

  });
}(Highcharts));
Next time, send the demo so that we can see the whole picture. We are not able to guess what can be wrong with the code without seeing it.
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Customize current datetime indicator

Hi,

thanks it worked but i have used ignore tsconfig see below, without it i was getting issue 'this' implicitly has type 'any' because it does not have a type annotation.


export default function(Highcharts: any) {
const H = Highcharts;
H.wrap(H.PlotLineOrBand.prototype, 'render', function(proceed: any) {
// @ts-ignore: Unreachable code error
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
// @ts-ignore: Unreachable code error
var chart = this.axis.chart,
// @ts-ignore: Unreachable code error
options = this.options,
marker = options.marker;

var color = options.color,
radius = 1,
xAxis = chart.xAxis[0],
x = chart.xAxis[0].toPixels(options.value),
y = chart.plotTop;

chart.renderer.path(['M', x, y, 'L', x, y - 8]).attr({
'stroke-width': 1,
stroke: color,
}).add();

chart.renderer.symbol('triangle-down', x - 5, y - 8, 10, 10).attr({
fill: color
}).add();

});

}



One thing i am facing since you have kept in render i am getting for GET api data but if create new data point or update i am getting extra triangle dropdown
extra.JPG
extra.JPG (8.3 KiB) Viewed 1443 times
[/b]
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Customize current datetime indicator

Since we have removed the marker from the config, you can remove the marker variable from the code that you've just sent in the post above.

When it comes to drawing two triangles, I haven't encountered such an issue in the JSFiddle demo, so I won't be able to help you without seeing your code with steps for reproduction.
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Customize current datetime indicator

removing marker not helping its issue with this keyword, i am using angular version 13, is it something with version?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Customize current datetime indicator

I would suggest looking into Stackoverflow, since the lack of type on the this keyword is not related to Highcharts but to the TypeScript itself.
And when it comes to the Angular version, we also used the number 13 in our demos so I don't think that it would cause any problems for you.


https://stackoverflow.com/questions/419 ... annotation

For example, take a look at the another demo with a custom wrap written in Angular 13.3.1

https://stackblitz.com/edit/highcharts- ... mPlugin.ts

If you won't manage to fix it by yourself, please share a part of your code that causes the aforementioned problem and we will figure something out!
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Customize current datetime indicator

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

Re: Customize current datetime indicator

You're welcome! I hope that these resources have helped you, but if you have any other questions related to the current datetime indicator, feel free to add a new post in this thread.

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Gantt”