I want to draw spider web chart

[rupesh811]

Hello Friends I need your help . I want to draw this spider web chart . I tried to draw spider web chart but tick marks not display . Here I am facing tick mark issue ie tick marks are not showing . Please suggest me .

Thank you

[jedrzej.r]

Hi!

Welcome to our forum and thanks for reaching out to us with your question!

As I can see in provided, the tick marks are visible on each tick. If this is just a mockup, it would be helpful if you could share config of your chart, so that I can inspect it further and find a solution to your issue.

I'm waiting for your reply!
Best regards!

[rupesh811]

I am sharing code in that code tick marks not visible . Please suggest something.

Code: Select all

Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'line'
    },

    accessibility: {
        description: 'A spiderweb chart compares the allocated budget against actual spending within an organization. The spider chart has six spokes. Each spoke represents one of the 6 departments within the organization: sales, marketing, development, customer support, information technology and administration. The chart is interactive, and each data point is displayed upon hovering. The chart clearly shows that 4 of the 6 departments have overspent their budget with Marketing responsible for the greatest overspend of $20,000. The allocated budget and actual spending data points for each department are as follows: Sales. Budget equals $43,000; spending equals $50,000. Marketing. Budget equals $19,000; spending equals $39,000. Development. Budget equals $60,000; spending equals $42,000. Customer support. Budget equals $35,000; spending equals $31,000. Information technology. Budget equals $17,000; spending equals $26,000. Administration. Budget equals $10,000; spending equals $14,000.'
    },

    title: {
        text: 'Budget vs spending',
        x: -80
    },

    pane: {
        size: '80%'
    },

    xAxis: {
        categories: ['Stream-1-Visual', 'Stream-2-Visual', 'PT2601', 'PT2602', 'TT2601', 'TT2602','FT2601','FT2602','AT2600','AT2601','FQI-2601','FQI-2602','SCS-001','SCS-002','Stream 1-UNC-Sm3','Stream 2-Unc-Sm3'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        min:0,
        max:16,
        gridLineColor: '#405aff',
        gridLineWidth:1
         
    },

    yAxis: [{
        gridLineInterpolation: 'polygon',
        lineWidth: 0, 
        showLastLabel: true,
        tickInterval:1,
        tickWidth: 1,
        min: 0,
        max:7,
        gridLineWidth:1,
        
       tickPositions: [0, 20, 40, 60, 80, 100],               
     labels: {
              allowOverlap: true,
              format: '{value}%',
              enabled:true
              },
      
            plotLines: [{
             gridLineColor: '#405aff',
                 width: 3,
                 value: 1
                     }] 
    },
    {
    linkedTo: 0,
    angle: -22.5,
    lineWidth: 0,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  }, {
    linkedTo: 0,
    angle: -45,
    lineWidth: 0,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  }, {
    linkedTo: 0,
    angle: -67.5,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  }, {
    linkedTo: 0,
    angle: -90,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
     {
    linkedTo: 0,
    angle: -112.5,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  {
    linkedTo: 0,
    angle: -135,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  {
    linkedTo: 0,
    angle: -157.5,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  {
    linkedTo: 0,
    angle: -180,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  
  {
    linkedTo: 0,
    angle: -202.5,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  
  {
    linkedTo: 0,
    angle: -225,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  
  {
    linkedTo: 0,
    angle: -247.5,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  
  {
    linkedTo: 0,
    angle: -270,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  
  {
    linkedTo: 0,
    angle: -292.5,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  
  {
    linkedTo: 0,
    angle: -315,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  
  {
    linkedTo: 0,
    angle: -337.5,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  },
  
  {
    linkedTo: 0,
    angle: -360,
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    borderWidth: 0,
  }
  
],
  
    tooltip: {
        shared: true,
        pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
    },

    legend: {
        align: 'right',
        verticalAlign: 'middle',
        layout: 'vertical'
    },

    series: [{
        name: 'Allocated Budget',
        data: [69, 52, 78, 52, 40, 51,82,68,30,78,81,70,50,73,100,100],
        pointPlacement: 'on',
        color: 'green'
    }, {
        name: 'Actual Spending',
        data: [50000, 39000, 42000, 31000, 26000, 14000],
        pointPlacement: 'on'
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                },
                pane: {
                    size: '70%'
                }
            }
        }]
    }

},

function(chart) {
  // Drawing coordinates
  for (var i = 1; i <= 16; i++) {
    const point0 = chart.yAxis[0].ticks[i].getPosition();
    chart.renderer.path(['M', point0.x - 2, point0.y, 'L', point0.x + 2, point0.y])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20
      })
      .add();
    // 1
    const point1 = chart.yAxis[1].ticks[i].getPosition();
    chart.renderer.path(['M', point1.x - 1, point1.y + 2, 'L', point1.x, point1.y - 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();

    // 2
    const point2 = chart.yAxis[2].ticks[i].getPosition();
    chart.renderer.path(['M', point2.x + 1.3, point2.y + 1.3, 'L', point2.x - 2, point2.y - 1])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();

    // 3
    const point3 = chart.yAxis[3].ticks[i].getPosition();
    chart.renderer.path(['M', point3.x - 1.3, point3.y + 1.3, 'L', point3.x + 2, point3.y - 1.3])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();

    // 4
    const point4 = chart.yAxis[4].ticks[i].getPosition();
    chart.renderer.path(['M', point4.x, point4.y - 2, 'L', point4.x + 1, point4.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();
      
      
       // 5
    const point5 = chart.yAxis[5].ticks[i].getPosition();
    chart.renderer.path(['M', point5.x, point5.y - 2, 'L', point5.x + 1, point5.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();
      
      
       // 6
    const point6 = chart.yAxis[6].ticks[i].getPosition();
    chart.renderer.path(['M', point6.x, point6.y - 2, 'L', point6.x + 1, point6.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();
  
   // 7
    const point7 = chart.yAxis[7].ticks[i].getPosition();
    chart.renderer.path(['M', point7.x, point7.y - 2, 'L', point7.x + 1, point7.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();
      
      // 8
    const point8 = chart.yAxis[8].ticks[i].getPosition();
    chart.renderer.path(['M', point8.x, point8.y - 2, 'L', point8.x + 1, point8.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();
      
      
       // 9
    const point9 = chart.yAxis[9].ticks[i].getPosition();
    chart.renderer.path(['M', point9.x, point9.y - 2, 'L', point9.x + 1, point9.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();
      
      
// 10
    const point10 = chart.yAxis[10].ticks[i].getPosition();
    chart.renderer.path(['M', point10.x, point10.y - 2, 'L', point10.x + 1, point10.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();      


// 11
    const point11 = chart.yAxis[11].ticks[i].getPosition();
    chart.renderer.path(['M', point11.x, point11.y - 2, 'L', point11.x + 1, point11.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();      
      
   // 12
    const point12 = chart.yAxis[12].ticks[i].getPosition();
    chart.renderer.path(['M', point12.x, point12.y - 2, 'L', point12.x + 1, point12.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();      
   
// 13
    const point13 = chart.yAxis[13].ticks[i].getPosition();
    chart.renderer.path(['M', point13.x, point13.y - 2, 'L', point13.x + 1, point13.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();  
      
      
  // 14
    const point14 = chart.yAxis[14].ticks[i].getPosition();
    chart.renderer.path(['M', point14.x, point14.y - 2, 'L', point14.x + 1, point14.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();
      
      
// 15
    const point15 = chart.yAxis[15].ticks[i].getPosition();
    chart.renderer.path(['M', point15.x, point15.y - 2, 'L', point15.x + 1, point15.y + 2])
      .attr({
        'stroke-width': 1,
        stroke: 'blue',
        zIndex: 20,
      })
      .add();      
      
  }

}

);

[jedrzej.r]

Thanks for sharing the code, after that I was able to find where the issue lays. You've been trying to iterate through ticks one-by-one index (0 -> 1 -> 2 etc.), whereas in reality, the ticks had different positions since the yAxis[0] had tickPositions altered in the chart config. I've modified your example so that the ticks are being rendered, but it probably needs some adjustments to the path being rendered off place.

Demo: https://jsfiddle.net/BlackLabel/6adckg9h/

Let me know if you have any further questions!
Best regards!

[rupesh811]

Thank you very much for your valuable response .
This code is helpful for me .

Actually I have 3 questions
1) In full screen mode ticks are not showing on chart but showing outside of chart .
2) I want to show 9 ticks on each gridlines difference between ticks are 10
3) Show sticks horizonally on gridline like diagram but here not showing like diagram.

I hope you will understand my questions.
And again thank you for your help .

Waiting for your reply !

[jedrzej.r]

1. It happens because the renderered ticks are added with the positions on chart load. After the chart redraws, e.g. when changing the browser dimensions or entering full screen mode, rendered element stay in the same place. In order to solve this problem, you can follow advice from this thread: https://stackoverflow.com/a/65885446

2. The rendered ticks depend on the for loop conditions which are based on ticks array, if you change the break condition to a smaller number, the amount of rendered ticks will change to 9: https://jsfiddle.net/BlackLabel/s5wqhnkL/

3. Could you please provide some mockup or simple graphic depiction what exactly would you like to achieve, so that I can provide a solution to this problem?

I'm waiting for your reply!
Best regards!

[rupesh811]

Thank you for your response .
I provide you image of chart so it will helpful for you to understand what I want .
According to image of chart I want to draw spider chart like ticks and other things .
Same chart like image no difference .
Again thank you for your valuable help .

Waiting for your reply !

[jedrzej.r]

We appreciate your continued use of our support services, and we're always eager to assist. While we're happy to help, please note that we can provide guidance on certain issues but may not be able to offer a comprehensive solution solely based on an image. If you are a licensed user with an active Advantage plan (Premium Support), we can continue to assist you effectively. Of course, we can continue assisting you if you are one of our licensed users with an active Advantage plan (Premium Support, see more on our support page).
Therefore, could I kindly ask you to provide your license ID? Please do so in a private message on the forum or send a private email to our address [email protected].

In case you don't have Advantage, or even a license, I'm afraid my assistance will be limited to brief and straightforward suggestions. I won't be able to provide you with complete solutions in the form of functioning code. In this case, I also encourage you to utilize HighchartsGPT.

Thank you for your understanding. We are here to help, but we cannot build your solution from scratch.

[rupesh811]

Thank you for your response .
I understood your concern . And thank you for your support .
Please understand I am not telling you to give me solution from scratch . I was telling you which thing I want to achieve . So I shared image of chart. In this chart only ticks related issue I am facing .
And you help me and support me . So thank you very much

Thank you for your support !

[jedrzej.r]

Below you will find a demo with ticks alligned properly, this requires tweaking a bit the path arguments when rendering the ticks using SVGRenderer so that they align properly. The first yAxis has different ticks, as the tickPositions array is overriden.

For redrawing the ticks placement on browser dimensions change, you can refer to the solution I've mentioned earlier: https://stackoverflow.com/a/65885446

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

References:
https://api.highcharts.com/highcharts/y ... kPositions
https://api.highcharts.com/class-refere ... derer#path
https://api.highcharts.com/class-refere ... ement#attr

In case of any other questions related to Highcharts, feel free to ask anytime.
Best regards!

[rupesh811]

Thank you for your cooperation.