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

'spline' chart legend question

In my chart right now, all the legends are underlined. But I want to underline only the 'Clear All' text. Do you have any way? Any help would be appreciated.

Code: Select all

            const splineSize = document.getElementsByName('spline') as any;
            var splineWidth = document.documentElement.scrollWidth - 300,
                splineHeight = 900,
                font14 = null;

            var SplineSeries = Highcharts.seriesTypes.spline;

            this.chart.splineProtoType = SplineSeries.prototype.drawGraph;

            // override the drawLine method
            var splineDrawGraph = SplineSeries.prototype.drawGraph;

            if (document.documentElement.scrollWidth > 1263) {
                font14 = 18;
            } else if (document.documentElement.scrollWidth <= 1263 && document.documentElement.scrollWidth > 959) {
                font14 = 14;
            } else if (document.documentElement.scrollWidth <= 959) {
                font14 = 11;
            }

            SplineSeries.prototype.drawGraph = function () {
                var arrowLength = 15,
                    arrowWidth = 8,
                    series = this,
                    segments = series.points,
                    path = [];

                if (segments.length > 0) {
                    let lastPoint = segments[segments.length - 1];
                    let nextLastPoint = segments[segments.length - 2];
                    let angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) / (lastPoint.plotY - nextLastPoint.plotY));

                    if (angle < 0) {
                        angle = Math.PI + angle;
                    }

                    // call the original method
                    splineDrawGraph.apply(series, arguments);

                    // last point
                    path.push('M', lastPoint.plotX, lastPoint.plotY);
                    if (lastPoint.plotX > nextLastPoint.plotX) {
                        // to the right
                        path.push('L', lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY - arrowWidth * Math.sin(angle));
                        path.push(lastPoint.plotX + arrowLength * Math.sin(angle), lastPoint.plotY + arrowLength * Math.cos(angle));
                        path.push(lastPoint.plotX - arrowWidth * Math.cos(angle), lastPoint.plotY + arrowWidth * Math.sin(angle), 'Z');
                    } else {
                        // to the left
                        path.push('L', lastPoint.plotX - arrowWidth * Math.cos(angle), lastPoint.plotY + arrowWidth * Math.sin(angle));
                        path.push(lastPoint.plotX - arrowLength * Math.sin(angle), lastPoint.plotY - arrowLength * Math.cos(angle));
                        path.push(lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY - arrowWidth * Math.sin(angle), 'Z');
                    }

                    series.chart.renderer
                        .path(path)
                        .attr({
                            fill: series.color,
                        })
                        .add(series.group);
                }
            };

            Highcharts.chart('spline', {
                chart: {
                    margin: 75,
                    type: 'spline',
                    reflow: false,
                    animation: {
                        duration: 4000,
                    },
                    height: splineHeight,
                    events: {
                        load: function () {
                            const chart = this,
                                offset = 75,
                                topMargin = 50;
                            chart.renderer
                                .text('More +', chart.chartWidth - offset, chart.chartHeight + topMargin - offset + 23)
                                .css({
                                    color: 'orange',
                                    fontWeight: 'bold',
                                    fontSize: font14,
                                })
                                .add();
                            chart.renderer
                                .text('- Less', offset - 60, chart.chartHeight + topMargin - offset)
                                .attr({
                                    rotation: -90,
                                })
                                .css({
                                    color: 'orange',
                                    fontWeight: 'bold',
                                    fontSize: font14,
                                })
                                .add();
                            chart.renderer
                                .text('- Less', offset - 50, chart.chartHeight + topMargin - offset + 23)
                                .css({
                                    color: 'green',
                                    fontWeight: 'bold',
                                    fontSize: font14,
                                })
                                .add();
                            chart.renderer
                                .text('More +', offset - 60, offset + topMargin)
                                .attr({
                                    rotation: -90,
                                })
                                .css({
                                    color: 'green',
                                    fontWeight: 'bold',
                                    fontSize: font14,
                                })
                                .add();

                            const startX = 0,
                                startY = 75,
                                endX = chart.chartWidth,
                                endY = startY,
                                yAxisZero = chart.yAxis[0].translate(0);

                            if (!chart.customLine) {
                                chart.customLine = chart.renderer
                                    .path(['M', startX, startY - 30, 'L', endX, endY - 30])
                                    .attr({
                                        'stroke-width': 1,
                                        stroke: 'black',
                                    })
                                    .add();
                            } else {
                                chart.customLine.attr({
                                    d: ['M', startX, startY, 'L', endX, endY],
                                });
                            }
                        },
                    },
                },
                credits: {
                    enabled: false,
                }, // 하단 highchart.com 글씨 삭제
                exporting: {
                    // 상단 context menu 제거
                    enabled: false,
                },
                title: {
                    text: '',
                },
                legend: {
                    enabled: true,
                    symbolPadding: 0,
                    symbolWidth: 0,
                    symbolHeight: 0,
                    squareSymbol: false,
                    align: 'right',
                    verticalAlign: 'top',
                    itemStyle: {
                        textDecoration: 'underline',
                    }
                },
                plotOptions: {
                    spline: {
                        events: {
                            legendItemClick: function (e) {
                                const chart = this.chart;
                                const chartClick = e.target.chart,
                                    index = e.target.index,
                                    series = chartClick.series[index];
                                if (!series.visible) {
                                    const options = series.options;
                                    series.remove();
                                    options.visible = !options.visible;
                                    chartClick.addSeries(options);
                                    return false;
                                }
                                chart.series.find((series) => series.name === 'Clear all').setVisible(true);
                                if (this.name === 'Clear all') {
                                    chart.series.forEach((series) => series.setVisible(false));
                                }
                            },
                        },
                        states: {
                            inactive: {
                                opacity: 1,
                            },
                        },
                        dataLabels: {
                            enabled: true,
                            align: 'left',
                            useHTML: true,
                            y: 15,
                            x: -5,
                            allowOverlap: true,
                            formatter: function () {
                                if (this.series.data[this.series.data.length - 1].visible == true) {
                                    if (this.x === this.series.data[this.series.data.length - 1].category) {
                                        return '<p style="color:' + this.series.data[this.series.data.length - 1].color + '; font-size: 18px; font-weight: 900;">' + this.series.name + '</p>';
                                    }
                                }
                                return null;
                            },
                        },
                        marker: {
                            enabled: false,
                        },
                    },
                    scatter: {
                        dataLabels: {
                            enabled: true,
                            y: -5,
                            formatter: function () {
                                return this.key;
                            },
                        },
                    },
                },
                tooltip: {
                    formatter: function () {
                        const date = new Date(this.point.z);
                        return Highcharts.dateFormat('%b %d, %Y', Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
                    },
                },
                xAxis: {
                    type: 'datetime',
                    gridLineWidth: 0,
                    min: -3,
                    max: 3,
                    lineWidth: 1,
                    lineColor: '#b3b3b3',
                    offset: -1 * (splineHeight / 2 - 75),
                    labels: {
                        enabled: false,
                    },
                    title: {
                        text: 'Asset correlation',
                        y: 0.4 * splineHeight + 20,
                        x: 5,
                        style: {
                            fontSize: font14,
                            fontWeight: 'bold',
                        },
                    },
                },
                yAxis: {
                    gridLineWidth: 0,
                    min: -3,
                    max: 3,
                    lineWidth: 1,
                    lineColor: '#b3b3b3',
                    offset: -1 * (splineWidth / 2 -87),
                    labels: {
                        enabled: false,
                    },
                    title: {
                        text: 'Risk sentiment',
                        x: -1 * (splineWidth / 2 - 50),
                        y: 0,
                        style: {
                            fontSize: font14,
                            fontWeight: 'bold',
                        },
                    },
                },
                series: this.data.spline.date,
            });

            SplineSeries.prototype.drawGraph = this.chart.splineProtoType;
        },
화면 캡처 2022-08-02 152947.png
화면 캡처 2022-08-02 152947.png (56.54 KiB) Viewed 225 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: 'spline' chart legend question

Hi there,

To style your legend items I would suggest using simple CSS.

Code: Select all

.highcharts-legend-item:last-of-type text {
	text-decoration: underline;
}
DEMO: https://jsfiddle.net/BlackLabel/wpum2L7f/
MDN: https://developer.mozilla.org/en-US/doc ... st-of-type

Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”