Question 45854 in CSS Question posted in
Some basic documentation can be found here.

marker (transform: translate(-50, -50)) does not focus on data – CSS

I have the problem with the markers where the images/symbols of the series markers are not centered and reviewing the html properties I find the following

enter image description here

where the translate of the image contains transform: translate(-50, -50); and when I put transform: translate(0, -50); the marker is centered with its symbol

enter image description here
Problem

and I can’t find a solution in vue
Demonstration in codesanbox : https://codesandbox.io/s/highcharts-vue-demo-forked-23dqg2?file=/src/components/Chart.vue

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    found a workaround while they fix the bug

    in the forum highcharts: https://www.highcharts.com/forum/viewtopic.php?f=9&t=50634&p=185227#p185227


  2. 0

    This is a bug that I reported here:
    https://github.com/highcharts/highcharts/issues/18790

    As a temporary workaround, you can use the last, correctly working version of Highcharts – 10.2.1

    Login or Signup to reply.
  3. 0

    the translation solution

       chart: {
    events: {
        load() {
            const chart = this,
                series = chart.series[0];
                
            series.points.forEach(point => {
                const graphic = point.graphic;
                
                graphic.attr({
                    transform: 'translate(0, 0)'
                });
            })
        }
    }
},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search