Highchart Donut and Bar Chart

0
votes

I'm trying to replicate chart similar to this (See Image Below). I've attached two separate plunkers for each chart.

What I am trying to achieve: Example Image

Donut Chart: ===> See Comment below for Plunkr

 chart: {
                type: 'pie'
            },
            credits: {
                enabled: false
            },
            colors: ['#F59640', '#A589D9', '#F16D64', '#35BEC1', '#EDEDED'],
            title: {
                text: '82',
                style: {
                    color: '#333333',
                    fontWeight: 'bold',
                    fill: '#333333',
                    width: '211px',
                    fontSize: '32px'
                },
                y: -30,
                verticalAlign: 'middle'
            },
            subtitle: {
                text: 'out of 100',
                style: {
                    color: '#333333',
                    fill: '#333333',
                    width: '211px',
                    fontSize: '28px'
                },
                y: 30,
                verticalAlign: 'middle'
            },
            plotOptions: {
                pie: {
                    innerSize: '60%',
                    outerRadius: '70%',
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            exporting: {
                enabled: false
            },
            series: [{
                data: [
                    ['Collaboration', 19.61],
                    ['Reading Articles', 17.47],
                    ['Insight', 19.95],
                    ['Personalization', 25]
                ]
            }]
  1. I'm trying to setup these values dynamically from an API. Total value is 100%, with 4-5 categories/series.
  2. Its almost complete, just need to show blank value if items do not add up to 100%.

Bar Chart: ===> Bar Chart Plunkr

            chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: ['Collaboration', 'Reading Articles', 'Insight', 'Personalization'],
            visible: false,
        },
        yAxis: {
            min: 0,
            max: 25,
            title: {
                text: null
            },
            stackLabels: {
                enabled: true,
            },
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            series: {
                stacking: 'percent'
            },
            bar: {
                grouping: false,
                dataLabels: {
                    enabled: false
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Remaining',
            data: [5.39, 7.53, 5.05, 0],
            borderWidth: 0,
            color: 'rgba(0,0,0,0)'
        }, {
            name: 'Remaining',
            data: [5.39, 7.53, 5.05, 0],
            borderWidth: 0,
            stack: 1,
            animation: false,
            color: '#CCC'
        }, {
            name: 'Completed',
            data: [{ y: 19.61, color: '#F59640' }, { y: 17.47, color: '#A589D9' }, { y: 19.95, color: '#F16D64' },
            { y: 25, color: '#35BEC1' }]
        }]

  1. Unable to separate each bar like the image. Each bars are not stacking each other.

  2. Also trying to match BOTH the labels above each bar as well as showing the Y labels under each bar with only the First and Last Label Showing.

Unable to post more than 2 link at this time.

Thank you in advance for your help.

2
javascriptangularchartshighcharts
Attached Missing Plunkr for Donut Chart ===>>Donut Chart Example: <=== – Vinny P.
Last time I tried to achieve sth like that, I added the remainder (both in the donut and the bar chart) as yet another item... – Sebastian Rothbucher

2 Answers

1
votes

As sebastian mentioned, for the donut chart you can calculate the the remainder and add that as a data point

series: [{
    data: [
        ['Collaboration', 19.61],
        ['Usability', 17.47],
        ['Insight', 19.95],
        ['Personalization', 25],
        {
            name: 'Missing',
            y: 17.97, // calculate missing value and use as a data point
            color: '#ccc'
        }
    ]
}]

donut chart plnkr: https://plnkr.co/edit/LiwDUGg0B6XeXRhXwFGE?p=preview

For the bar chart, you don't want the plotOptions.series.stacking = percent. This is converting your series data to a percent when you have already done that in the data you passed in.

Now you can set your Remaining series to the max value

{
    name: 'Remaining',
    data: [25, 25, 25, 25],
    borderWidth: 0,
    stack: 1,
    animation: false,
    color: '#CCC'
}

As for separating the bars & the labels, I would go ahead and make 4 separate charts and use an ngFor to load them into the DOM.

0
votes

Bar chart only:

You can achieve that kind of look by creating a separate series for every point and linking it to it's own (properly positioned) x and y axes.

Live working example: http://jsfiddle.net/kkulig/41q6k8tc/

var series = [{
      data: [{
          y: 19.61,
          color: '#F59640'
        }],
        name: 'Complete',
        xAxis: 0,
        yAxis: 0
    }, {
      data: [{
        y: 17.47,
        color: '#A589D9'
      }],
      name: 'Complete',
      xAxis: 1,
      yAxis: 1
    }, {
      data: [{
        y: 19.95,
        color: '#F16D64'
      }],
      name: 'Complete',
      xAxis: 2,
      yAxis: 2
    }, {
      data: [{
        y: 25,
        color: '#35BEC1'
      }],
      name: 'Complete',
      xAxis: 3,
      yAxis: 3
    }];

For positioning axes I used top property (it's not documented in the API, but it works):

var xAxes = [{
  categories: ['Collaboration'],
}, {
  categories: ['Reading Articles'],
  top: '25%'
}, {
  categories: ['Insight'],
  top: '50%'
}, {
  categories: ['Personalization'],
  top: '75%'
}].map(function(axis) {
  // common options
  axis.height = '25%';
  axis.offset = 0;
  axis.lineWidth = 0;
  axis.tickWidth = 0;

  return axis;
});

For every series I created corresponding 'Uncompleted' series using this code:

for(var i = series.length - 1; i >= 0; i--) {
    series.push({
    name: 'Uncompleted',
    data: [25 - series[i].data[0].y],
    xAxis: series[i].xAxis,
    yAxis: series[i].yAxis,
    color: '#ccc',
    dataLabels: {
        enabled: false
    }
  });
}

These series are stacked.

Via tickPositions you can configure an axis to have only two labels.

Tooltip doesn't seem to handle top offset properly. Line y = anchor[1] needs to be changed to + (point.series.xAxis.top || 0) - (this.chart.plotTop || 0); in Highcharts.Tooltip.prototype.refresh core function.

API references: