Tae June Park
Posts: 8
Joined: Wed May 18, 2022 2:38 am

stock chart tooltip format

Hi,

I want to change the stock chart tooltip format like the attached image, is it possible?
And I wonder if the legend location and range selector location will be like the attached image.

Thank you very much for your reply!

Code: Select all

	Highcharts.setOptions({
                lang: {
                    // Pre-v9 legacy settings
                    rangeSelectorTo: 'To',
                },
            });

            const date = new Date(2022, 0, 1);
            const dates = [];
            const lastYear = 2022;

            let data1 = [];
            let data2 = [];
            let data3 = [];

            while (date.getFullYear() <= lastYear) {
                data1.push([Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()), Math.floor(Math.random() * 1000) + 100]);
                data2.push([Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()), Math.floor(Math.random() * 1000) + 100]);
                date.setDate(date.getDate() + 1);
            }

            Highcharts.stockChart('growthChart', {
                credits: {enabled: false}, // 하단 highchart.com 글씨 삭제
                navigator: {
                    enabled: false,
                },
                scrollbar: {
                    enabled: false,
                },
                xAxis: {
                    type: 'datetime',
                    lineColor: '#000000',
                    tickColor: '#000000',
                    tickmarkPlacement: 'on',
                    tickInterval: 24 * 60 * 60 * 1000 * 20,
                    labels: {
                        formatter: function() {
                            return Highcharts.dateFormat('%b %e, %Y', Number(this.value));
                        },
                        style: {
                            color: '#000000',
                            fontSize: '18px',
                            fontWeight: 'bold',
                            padding: '20px 0px 0px 0px'
                        }
                    },
                },
                yAxis: {
                    opposite: false,
                },
                tooltip: {
                    split: false,
                    shared: false,
                    // crosshairs: false,
                    xDateFormat: '%b.%d, %Y ',
                    valueDecimals: 1,
                    pointFormat: '<strong style="color:{series.color};">{series.name}</strong> <b>{point.y:.1f}%</b>',
                },
                legend: {
                    enabled: true,
                    align: 'right',
                    verticalAlign: 'top',
                },
                rangeSelector: {
                    buttonTheme: { // styles for the buttons
                        r: 8,
                        states: {
                            hover: {
                            },
                            select: {
                                fill: '#039',
                                style: {
                                    color: 'white',
                                },
                            },
                            // disabled: { ... }
                        },
                    },
                    inputBoxBorderColor: 'gray',
                    inputBoxWidth: 120,
                    inputBoxHeight: 18,
                    inputStyle: {
                        color: '#039',
                        fontWeight: 'bold',
                    },
                    labelStyle: {
                        color: 'silver',
                        fontWeight: 'bold',
                    },
                    selected: 1,
                },
                series: [
                    {
                        name: 'Oceania',
                        data: data1,
                        color: '#FF754B',
                    }, {
                        name: 'Asia',
                        data: data2,
                        color: '#FEC90E',
                    },
                ],
            });
Attachments
chart.PNG
chart.PNG (70.22 KiB) Viewed 642 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: stock chart tooltip format

Hi Tae June Park,

Thanks for contacting us with your question.

Input position can be adjusted with align and x offset property. When it comes to the legend, you can use align, verticalAlign and floating properties to achieve the position that you want. In case of. the tooltip, xDateFormat property can be used to change date format and valueSuffix to add the % sign to the value.
Demo: https://jsfiddle.net/BlackLabel/fpx0bgr2/

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”