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

area chart xaxis

I am currently using an area chart, and I want to show the label for the xaxis label only when the data is the first day of the year. How can I do that?

Code: Select all

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

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

            while (date.getFullYear() <= lastYear) {
                dates.push(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));

                data1.push(Math.floor(Math.random() * 5) + 1);
                data2.push(Math.floor(Math.random() * 5) + 1);
                data3.push(Math.floor(Math.random() * 5) + 1);

                date.setDate(date.getDate() + 1);
            }

            Highcharts.chart('historicalChart', {
                chart: {
                    type: 'area'
                },
                credits: {enabled: false}, // 하단 highchart.com 글씨 삭제
                exporting: { // 상단 context menu 제거
                    enabled: false
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                accessibility: {
                    point: {
                        valueDescriptionFormat: '{index}. {point.category}, {point.percentage:.1f}%.'
                    }
                },
                xAxis: {
                    type: 'datetime',
                    categories: dates,
                    lineColor: '#000000',
                    tickColor: '#000000',
                    tickmarkPlacement: 'on',
                    tickInterval: 1,
                    allowDecimals: false,
                    labels: {
                        formatter() {
                            let date = new Date(this.value);
                            console.log(date);
                            return Highcharts.dateFormat('%Y', this.value);
                        },
                    },
                },
                yAxis: [{
                    lineWidth: 0,
                    gridLineColor: '#000000',
                    title: {
                        text: ''
                    },
                    labels: {
                        formatter: function () {
                            //Add percent sign to first value
                            if (this.isLast == true) {
                                return this.value + "%";
                            } else {
                                return this.value;
                            }
                        }
                    }
                }],
                tooltip: {
                    // shared: true,
                    // crosshairs: true,
                    xDateFormat: '%b.%d, %Y ',
                    valueSuffix: '%',
                    valueDecimals: 1,
                    style: {
                        fontSize: '13.5px',
                        color: '#000000'
                    }
                },
                // tooltip: {
                //     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
                // },
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                },
                plotOptions: {
                    size: '100%',
                    area: {
                        stacking: 'percent',
                        lineColor: '#000000',
                        lineWidth: 1,
                        pointPlacement: 'on',
                        marker: {
                            enabled: false
                        },
                    },
                    column: {
                        stacking: 'normal',
                        pointPadding: 0,
                        groupPadding: 0,
                        borderWidth: 0
                    }
                },
                series: [
                    {
                        name: 'Oceania',
                        data: data1,
                        color: '#ff754b',
                    }, {
                        name: 'Asia',
                        data: data2,
                        color: '#FF8000',
                    }, {
                        name: 'Africa',
                        data: data3,
                        color: '#2e9875',
                    },
                ]
            });
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: area chart xaxis

Hello Tae June Park,
Welcome to our forum and thanks for contacting us with your question!

All you have to do is add some logic to xAxis.labels.formatter callback function and check if the new date's year is another than the last shown year in the label.

Demo: https://jsfiddle.net/BlackLabel/bL53degs/

Feel free to ask any further questions!
Best regards!
Hubert Kozik
Highcharts Developer
Tae June Park
Posts: 8
Joined: Wed May 18, 2022 2:38 am

Re: area chart xaxis

oh thank you so much i solved it
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: area chart xaxis

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”