kdp9390
Posts: 62
Joined: Tue Apr 26, 2022 3:20 am

'column chart' title and rangeSelector option location and tooltip question

Currently my chart is messed up with title and date pick option legend positions. The design I want to do is to draw a chart naturally with a line as shown in the photo below, on top of that, the title and date selection are on the upper left, and the legend line on the right is spaced below the line. Also, I want to show one tooltip when hovering the mouse.

Code: Select all

            Highcharts.chart('aum-chart', {
                credits: {
                    enabled: false,
                }, // 하단 highchart.com 글씨 삭제
                exporting: {
                    // 상단 context menu 제거
                    enabled: false,
                },
                chart: {
                    type: 'column',
                    height: 200,
                    marginTop: 0,
                },
                navigator: {
                    enabled: false
                },
                title: {
                    useHTML: true,
                    align: 'left',
                    text: 'AUM 추이',
                    floating: true,
                },
                legend: {
                    enabled: true,
                    verticalAlign: 'top',
                    align: 'right',
                    y: -45
                },
                rangeSelector: {
                    enabled:true,
                    buttons: [],
                    inputPosition: 'left',
                    x: 100,
                    y: 10
                },

                scrollbar: {
                    enabled: false
                },
                
                plotOptions: {
                    column: {
                        stacking: 'normal'
                    }
                },
                
                xAxis: {
                    labels: {
                        formatter() {
                            return Highcharts.dateFormat('%Y.%m', this.value);
                        }
                    }
                },
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                    pointStart: Date.UTC(2022, 1, 1),
                    pointInterval: 2592000000
                }, {
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                    pointStart: Date.UTC(2022, 1, 1),
                    pointInterval: 2592000000
                }]
            });
my current chart
화면 캡처 2022-11-01 014914.png
화면 캡처 2022-11-01 014914.png (8.59 KiB) Viewed 236 times
desired chart
화면 캡처 2022-11-01 014808.png
화면 캡처 2022-11-01 014808.png (18.56 KiB) Viewed 236 times
화면 캡처 2022-11-01 014715.png
화면 캡처 2022-11-01 014715.png (16.71 KiB) Viewed 236 times
kamil.m
Site Moderator
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: 'column chart' title and rangeSelector option location and tooltip question

Hello there,

In the previous posts I have already showed you how to create a line above the chart.
viewtopic.php?f=9&t=48727

Since you layout is a bit custom, you just have to play around with the x and y values on legend, title and rangeSelector. Take a look at the demo below.
https://jsfiddle.net/BlackLabel/m8304yqh/

As for the tooltip, there is already a one tooltip displayed on the chart. Could you elaborate more on that issue?

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”