CODEWITHSUNDEEP
javascriptjqueryhighcharts
Hira Majid
Hira Majid

Reputation: 554

Highchart custom styling

I need to show my pie chart like below image but once I used Highchart I didn't get same UI for Pie chart.

Original UI

Below is the image of Pie chart showing on my project.

Current UI

Is there a way I can get same UI of pie chart?

Upvotes: 0

Views: 94

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

For achieving similar chart in Highcharts you should be able to use two pie series with different size, but the same innerSize:

  series: [{
    colorByPoint: true,
    borderWidth: 0,
    innerSize: '30%',
    size: '120%',
    dataLabels: {
      enabled: false,
    },
    data: [{
      name: 'one',
      y: 56.33,
      color: 'rgba(0,0,0,0)'
    }, {
      name: 'two',
      y: 24.03,
      color: 'rgba(0,0,0,0)'
    }, {
      name: 'three',
      y: 10.38,
      color: 'rgba(0,0,0,0)'
    }, {
      name: 'four',
      y: 24.77
    }, {
      name: 'five',
      y: 10.91,
      color: 'rgba(0,0,0,0)'
    }, {
      name: 'six',
      y: 10.2,
      color: 'rgba(0,0,0,0)'
    }]
  }, {
    colorByPoint: true,
    borderWidth: 0,
    innerSize: '30%',
    size: '80%',
    data: [{
      name: 'one',
      y: 56.33
    }, {
      name: 'two',
      y: 24.03,
    }, {
      name: 'three',
      y: 10.38
    }, {
      name: 'four',
      y: 24.77
    }, {
      name: 'five',
      y: 10.91
    }, {
      name: 'six',
      y: 10.2
    }]
  }]

Live example: http://jsfiddle.net/4gdawus0/

Upvotes: 1

Related Questions