Highcharts 3d - Scatterchart 3d

[McAgnus71]

Description of the feature

Lines in 3D for the Scatterplot

When using the Scatterchart, espesially with fewer data points, it would be great to be possible to add a stem / line from the point to the bottom of the 3d chart. That will make it easier to see where in 3D the point is. While rotating it is normally not a problem, but when creating 2D images from the plot it is hard to see / get a feeling for where the points are in space.

Library related to the feature

Possible libraries to add the feature in would be: https://code.highcharts.com/highcharts-3d.js https://code.highcharts.com/highcharts-more.js https://code.highcharts.com/modules/accessibility.js

Proof of Concept/Live example for the feature

At present I only have a local example so I have attached an ugly line in a Screenshot to try to demonstrate what I mean.

---

You can vote for this feature by adding a thumbs-up reaction to this post.

[raf18seb]

Hi @McAgnus71, thanks for posting about a nice idea!

I'm not sure whether this should go into the Highcharts core because it's already possible with an external projections.js plugin, but we'll see how many votes (thumbs up) it gets.

In the projections.js there's a small bug, but I corrected it and you can see a working demo here: https://jsfiddle.net/BlackLabel/5qrdp7kt/ (also, see the line 86)

I also found another solution for this (without projections.js plugin), leaving it here for a reference: https://jsfiddle.net/BlackLabel/wdy4jstm/

[McAgnus71]

Thanks!

Will check it out!

/Magnus

On Mon, Jan 3, 2022 at 12:55 PM Rafał @.***> wrote:

Hi @McAgnus71 https://github.com/McAgnus71, thanks for posting about a nice idea!

I'm not sure whether this should go into the Highcharts core because it's already possible with an external projections.js https://blacklabel.github.io/projections/ plugin. We'll see how many votes (thumbs up) it gets.

In the projections.js there's a small bug, but I corrected it and you can see a working demo here: https://jsfiddle.net/BlackLabel/5qrdp7kt/

I also found another solution for this (without projections.js plugin), leaving it here for a reference: https://jsfiddle.net/BlackLabel/wdy4jstm/

— Reply to this email directly, view it on GitHub https://github.com/highcharts/highcharts/issues/16844#issuecomment-1004042210, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXEHYRRCBCWZARY2DIVJNALUUGFETANCNFSM5LE54VNQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[McAgnus71]

Hi Again,

When adding lines and markers from the second solution proposed (without the plugin) the rotation in my Script stops working. Btw: The markers and lines are exactly what I wanted.

Any idea why that might happen?

Cheers

Magnus

On Mon, Jan 3, 2022 at 12:55 PM Rafał @.***> wrote:

Hi @McAgnus71 https://github.com/McAgnus71, thanks for posting about a nice idea!

I'm not sure whether this should go into the Highcharts core because it's already possible with an external projections.js https://blacklabel.github.io/projections/ plugin. We'll see how many votes (thumbs up) it gets.

In the projections.js there's a small bug, but I corrected it and you can see a working demo here: https://jsfiddle.net/BlackLabel/5qrdp7kt/

I also found another solution for this (without projections.js plugin), leaving it here for a reference: https://jsfiddle.net/BlackLabel/wdy4jstm/

— Reply to this email directly, view it on GitHub https://github.com/highcharts/highcharts/issues/16844#issuecomment-1004042210, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXEHYRRCBCWZARY2DIVJNALUUGFETANCNFSM5LE54VNQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[raf18seb]

@McAgnus71, could you provide the exact steps to reproduce the problem? I'm rotating and everything works well, see:

[McAgnus71]

Hi Rafal,

I did not start fresh from the sample. I tried adding the lines and markers to my existing chart. I am not sure this will work, but I will try to paste the code below. If you comment the line from "//add projection lines" to to "//add mouse and ..." it will rotate. Right now it does not and I have gone blind to why. It will look the same though.

/Magnus

// Give the points a 3D feel by adding a radial gradient Highcharts.setOptions({ colors: Highcharts.getOptions().colors.map(function (color) { return { radialGradient: { cx: 0.4, cy: 0.3, r: 0.5 }, stops: [ [0, color], [1, Highcharts.color(color).brighten(-0.2).get('rgb')] ] }; }) });

// Set up the chart var chart = new Highcharts.Chart({ chart: { // borderColor: '#EBBA95', // borderWidth: 3, // type: 'line', renderTo: 'container', margin: 100, //inside the plotted fram type: 'scatter3d', animation: false, options3d: { enabled: true, alpha: 10, beta: 20, depth: 550, viewDistance: 3, fitToPlot: false, frame: { bottom: { size: 1, color: 'rgba(0,0,0,0.02)' }, back: { size: 1, color: 'rgba(0,0,100,0.04)' }, side: { size: 1, color: 'rgba(0,0,0,0.06)' } } } }, title: { text: 'DM Performance Ideation Overview' }, subtitle: { text: 'Ideas rated with Risk, Reward, Effort. Best idea - Front, Top, LH Corner' }, accessibility: { point: { // This part should be removed. I have copy pasted it and it does no harm. For now I just leave it. Could come in handy later descriptionFormatter: function (point) { return ( point.options.custom.value + ' ' + point.series.options. custom.gender + 's have been named ' + point.name + '. ' + 'This ranks on place #' + point.options.custom.rank + '.' ); } } }, tooltip: { headerFormat: '', pointFormat: ( 'Risk: {point.name}
' + 'Risk {point.x}
Reward {point.y}
Effort {point.z}' ) }, plotOptions: { scatter: { width: 10, height: 10, depth: 10, } }, yAxis: { min: 0, max: 10, title: { text: 'Reward', style: { fontWeight: 'normal', color: 'blue' } }, }, xAxis: { min: 0, max: 10, gridLineWidth: 1, title: { text: 'Risk', style: { fontWeight: 'normal', color: 'blue' } }, }, zAxis: { min: 0, max: 10, showFirstLabel: false, title: { text: 'Effort', style: { fontWeight: 'normal', color: 'blue' }, align: 'middle', offset: -45, rotation: -0, }, }, legend: { enabled: false //Change to true if multiple series }, series: [{ type: 'scatter', name: 'Ideas', colorByPoint: true, shadow: true, accessibility: { exposeAsGroupOnly: true }, marker: { symbol: 'cirkle', // symbol: 'url( https://www.highcharts.com/samples/graphics/sun.png)', radius: 12, lineWidth: 2, linecolor: '#FFFFFF' }, animation: { duration: 2000 }, // Name, Risk, Reward, Effort data: [ ['Magnus', 3, 9, 2], ['Kalle', 2, 2, 4], ['Pelle', 6, 3, 3], ['Olle', 4, 5, 5], ['Rakshit', 5, 6, 8], ['Prasad', 7, 8, 1], ['Rahul', 1, 2, 7], ['Krushna', 1, 9, 1], ['Darshan', 4, 3, 7], ['Kiran', 1, 5, 6], ['JustSad', 9, 1, 9]] }, //Add Projection lines

        // Use the following data for test
          {
            name: 'Proj.A',
            marker: {
              radius: 7,
              symbol: 'circle'
            },
            colorByPoint: false,
            color: 'rgba(155,155,155,1)',
            data: [
                ['Magnus', 3, 9, 2],
                ['Kalle', 2, 2, 4],
                ['Pelle', 6, 3, 3],
                ['Olle', 4, 5, 5],
                ['Rakshit', 5, 6, 8],
                ['Prasad', 7, 8, 1],
                ['Rahul', 1, 2, 7],
                ['Krushna', 1, 9, 1],
                ['Darshan', 4, 3, 7],
                ['Kiran', 1, 5, 6],
                ['JustSad', 9, 1, 9]
            ]
          },
        {
            name: 'line.A',
            marker: {
              enabled: false
            },
            lineWidth: 1,
            color: 'rgba(155,155,155,1)',
            dashStyle: 'dash',
            data: [[3, 9, 2],[3, 0, 2],
            null, [2, 2, 4], [2, 0, 4],
            null, [6, 3, 3],[6, 0, 3],
            null, [4, 5, 5],[4, 0, 5],
            null, [5, 6, 8],[5, 0, 8],
            null, [7, 8, 1],[7, 0, 1],
            null, [1, 2, 7],[1, 0, 7],
            null, [1, 9, 1],[1, 0, 1],
            null, [4, 3, 7],[4, 0, 7],
            null, [1, 5, 6],[1, 0, 6],
            null, [9, 1, 9],[9, 0, 9]
            ]
          },
    ]
});

// Add mouse and touch events for rotation (function (H) { function dragStart(eStart) { eStart = chart.pointer.normalize(eStart);

    var posX = eStart.chartX,
        posY = eStart.chartY,
        alpha = chart.options.chart.options3d.alpha,
        beta = chart.options.chart.options3d.beta,
        sensitivity = 5,  // lower is more sensitive
        handlers = [];

    function drag(e) {
        // Get e.chartX and e.chartY
        e = chart.pointer.normalize(e);

        chart.update({
            chart: {
                options3d: {
                    alpha: alpha + (e.chartY - posY) / sensitivity,
                    beta: beta + (posX - e.chartX) / sensitivity
                }
            }
        }, undefined, undefined, false);
    }

    function unbindAll() {
        handlers.forEach(function (unbind) {
            if (unbind) {
                unbind();
            }
        });
        handlers.length = 0;
    }

    handlers.push(H.addEvent(document, 'mousemove', drag));
    handlers.push(H.addEvent(document, 'touchmove', drag));

    handlers.push(H.addEvent(document, 'mouseup', unbindAll));
    handlers.push(H.addEvent(document, 'touchend', unbindAll));
}
H.addEvent(chart.container, 'mousedown', dragStart);
H.addEvent(chart.container, 'touchstart', dragStart);

}

(Highcharts));

On Mon, Jan 3, 2022 at 5:48 PM Rafał @.***> wrote:

@McAgnus71 https://github.com/McAgnus71, could you provide the exact steps to reproduce the problem? I'm rotating and everything works well, see: [image: 3d-scatter-lines] https://user-images.githubusercontent.com/23310742/147956851-c239d312-7a6e-4332-99ff-3c77996b1c45.gif

— Reply to this email directly, view it on GitHub https://github.com/highcharts/highcharts/issues/16844#issuecomment-1004218797, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXEHYRS2P33UKDCS7AJIMF3UUHHMDANCNFSM5LE54VNQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[McAgnus71]

I found the solution to my problem.

Now it is working like it should. I had left some code I picked up from another chart usage. It never caused any problem before, but now it caused a render issue.

Thanks for your help!!!

On Mon, Jan 3, 2022 at 5:48 PM Rafał @.***> wrote:

@McAgnus71 https://github.com/McAgnus71, could you provide the exact steps to reproduce the problem? I'm rotating and everything works well, see: [image: 3d-scatter-lines] https://user-images.githubusercontent.com/23310742/147956851-c239d312-7a6e-4332-99ff-3c77996b1c45.gif

— Reply to this email directly, view it on GitHub https://github.com/highcharts/highcharts/issues/16844#issuecomment-1004218797, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXEHYRS2P33UKDCS7AJIMF3UUHHMDANCNFSM5LE54VNQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!