pengenda
Posts: 1
Joined: Fri Jul 29, 2022 7:09 pm

Tooltip date format doesn't wprk work

I follow the api document and would like to configure tooltip format, line chart works however, candle chart doesn't work. Sample code

Code: Select all

Highcharts.stockChart('equities-line-chart', {
    rangeSelector: null,
    title: '',
    exporting: { enabled: false },
    series: [
      {
        name: symbols,
        type: 'area',
        data: values,
        gapSize: 5,
        tooltip: { valueDecimals: 2, xDateFormat: '%b %d, %Y %I:%M %p' },
See the pictures below. I wish to format as the same, however, one doesn't work. Can someone help me take a look at it?
Attachments
line.png
line.png (34.39 KiB) Viewed 289 times
candle.png
candle.png (40.35 KiB) Viewed 289 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Tooltip date format doesn't wprk work

Hi there,

Welcome to our forum and thank you for contacting us with this question.

I'll explain to you how you can achieve the same formatting on a candlestick chart as on the line chart.

First of all, you need to remember that this is a shared tooltip, so the properties are structured a bit differently than in a standard one.
You can create your tooltip in the tooltip.formatter method.
Since it's a shared tooltip, the return is an array, where the first item is a xAxis tooltip, and the second one is the tooltip from the chart area.

Also please note, that the line chart and candlestick chart show the same data in a slightly different form (hence the difference in tooltips).
The line chart shows you the close price of a certain asset, where a candlestick represents an open, high, low, close price in a given timeframe (i.e 5 minute bar).

I have attached a simple demo with a formatting example, so please take a look at it and check the official API documentation.

DEMO: https://jsfiddle.net/BlackLabel/jqtvh7u6/
API Reference: https://api.highcharts.com/highstock/tooltip.formatter
https://api.highcharts.com/class-refere ... ckFunction
https://api.highcharts.com/class-refere ... dateFormat

Let me know if that is what you were looking for,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”