webwizard
Posts: 9
Joined: Mon Jul 19, 2021 2:43 pm

Aadding a second dataset to the chart

Hi

I'm moving away from the highcharts-vue package because the "new" composition API works perfectly fine with Highcharts without any external package.

I am however facing problems trying to add new data to the chart

This is my current chart:

Code: Select all

    testChart.value = Highcharts.chart('container', {
        renderTo: 'container',
        chart: {
            type: "area",
            backgroundColor: "rgba(0,0,0,0)",
            maxHeight: 300,
            minHeight: 200,
            boost: {
                useGPUTranslations: true,
                seriesThreshold: 5
            },
            zoomType: "xy",
            animation: false,
        },
        title: {
            text: ''
        },
        exporting: {
            enabled: false,
        },
        navigator: {
            maskInside: true,
            outlineColor: "0px",
            xAxis: {
                labels: {
                    align: "center",
                    // x: 10,
                    // y: 12,
                    style: {
                        border: "transparent",
                        color: props.dataset.theme === "light" ? "#374151" : "#fff",
                    },
                },
            },
        },
        rangeSelector: {
            allButtonsEnabled: false,
            dropdown: "never",
            inputEnabled: false,
            enabled: false,
            buttonTheme: {
                visibility: "hidden",
            },
            labelStyle: {
                visibility: "hidden",
            },
        },
        legend:{
            enabled:false
        },
        credits: {
            enabled: false,
        },
        scrollbar: {
            enabled: true,
            barBackgroundColor: "transparent",
            barBorderWidth: 0,
            buttonBackgroundColor: "transparent",
            buttonBorderWidth: 0,
            buttonArrowColor: "transparent",
            rifleColor: "transparent",
            trackBackgroundColor: "transparent",
            trackBorderColor: "transparent",
        },
        xAxis: {
            title: {
                text: ''
            },
            crosshair: {
                width: 1,
                color: "gray",
                dashStyle: "Dash",
                label: {
                    shape: "square",
                    backgroundColor: "gray",
                    enabled: true,
                    formatter: (e) => {
                        return DateTime.fromJSDate(new Date(e)).toFormat('LLL dd yyyy hh:mm:ss');
                    },
                },
            },
            type: "datetime",
            lineColor: props.dataset.theme === "light" ? "#d1d5db" : "#374151",
            labels: {
                align: "center",
                reserveSpace: true,
                style: {
                    color: props.dataset.theme === "light" ? "#6f7784" : "#ced1d6",
                    fontSize: "11px",
                },
            },
        },
        yAxis: [
            {
                title: {
                    text: ''
                },
                min: lowestDatasetY.value.y,
                offset: 10,
                type: props.dataset?.options?.yAxis?.type ?? 'linear',
                crosshair: {
                    snap: false,
                    width: 1,
                    color: "gray",
                    dashStyle: "Dash",
                    label: {
                        useHTML: true,
                        enabled: true,
                        shape: "square",
                        backgroundColor: "gray",
                        formatter: (e) => {
                            return getCrosshairYFormatter(e);
                        },
                    },
                },
                opposite: false,
                gridLineColor: props.dataset.theme === "light" ? "#d1d5db" : "#374151",
                labels: {
                    align: "right", // Why the fuck do i need to put it opposite of where i want it?
                    style: {
                        color: props.dataset.theme === "light" ? "#6f7784" : "#ced1d6",
                        fontSize: "11px",
                    },
                },
                plotLines: [{
                    color: '#eeb919',
                    width: 0.5,
                    dashStyle: 'Dash',
                    value: firstDataset.value,
                    label: {
                        useHTML: true,
                        align: "right",
                        enabled: true,
                        formatter: () => {
                            return getPlotYFormatter(firstDataset.value);
                        },
                    },
                }]
            },
        ],
        tooltip: {
            outside: true,
            formatter: function () {
                if (emitHoverEventTimeout.value === undefined){
                    emitHoverEventTimeout.value = window.setTimeout(() => {
                        // todo - check if it is neccesary to emit the whole this.. maybe just this.point.options i use props.dataset.datapoints.y
                        // however maybe construct a smaller object with the neccesary values
                        emit('hoverChart', this.point.options);
                        emitHoverEventTimeout.value = undefined;
                    }, 50);
                }
            },
        },
        series: [
            {
                name: "Price",
                yAxis: 0,
                turboThreshold: testData.value.length,
                threshold: Number(firstDataset.value),
                boostThreshold: 1,
                data: testData.value,
                zones: [
                    {
                        value: Number(firstDataset.value),
                        color: '#ff6968',
                        fillColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, "rgba(255, 105, 104, 0)"],
                                [1, "rgba(255, 105, 104, 0.3)"],
                            ],
                        },
                        threshold: Infinity,
                    },
                    {
                        color: '#94caae',
                        fillColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, "rgba(34, 197, 94, 0.3)"],
                                [1, "rgba(34, 197, 94, 0)"],
                            ],
                        },
                        threshold: 0
                    }
                ],
                states: {
                    hover: {
                        enabled: true,
                        lineWidth: 2,
                    },
                },
            },
        ],
    });

However in vue I have a watcher watching, and I'm trying to add a second dataset when that is triggered, Im trying to do it like this:

Code: Select all

    testChart.value.yAxis.push({
        min: lowestComparedY.y,
        offset: 25,
        type: props.dataset?.options?.yAxis?.type ?? 'linear',
        opposite: true,
        gridLineColor: cookieGet("theme") === "light" ? "#d1d5db" : "#374151",
    });

    testChart.value.series.push({
        name: `Price '${props.dataset.comparedAsset.symbol}'`,
        yAxis: 1,
        turboThreshold: newData.length,
        threshold: Number(newData.y),
        boostThreshold: 1,
        data: newData,
        color: '#f0ba19',
        states: {
            hover: {
                enabled: true,
                lineWidth: 2,
            },
        },
    });
However this does not work anymore, the chart does not render the new dataset.

I have tried to use : testChart.value.redraw();

And tried to do setData instead of push

Can someone tell me what i am doing wrong? :)
webwizard
Posts: 9
Joined: Mon Jul 19, 2021 2:43 pm

Re: Aadding a second dataset to the chart

Why is there no edit or delete feature? I'm making a new simpler sample where I have progressed
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Aadding a second dataset to the chart

Hello,

The ability to edit or delete a post is available for 15 minutes from its addition, this is added for security reasons against spam and sharing inappropriate content.

You can post a simplified example in the next message, but it's best if you reproduce the problem in an online demo based on, for example, this demo: https://codesandbox.io/s/highcharts-vue-demo-qkf43

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”