Customer-Centricity

by pepperdigital

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
 
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 320px;
    max-width: 600px;
    margin: 1em auto;
}
.highcharts-background {
    fill: #E9EFF6;
}
.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 700px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'area',
        marginTop: 120
    },

    credits: {
        enabled: false
    },
      exporting: {
       enabled: false
    },
    title: {
        text: 'Customer-Centricity Summary',
    },
        pane: {
            size: '160%'
        },

    xAxis: {
        categories: ['True Customer-Centricity', 'Coherence on <br/>Mutual Value', 'Strategic and <br/>Pragmatic Action'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        gridLineColor: '#5D717F'
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0,
          labels: {
    enabled: false
  },
gridLineColor: "rgb(93,113,127,0)"
    },


    tooltip: {
        shared: true,
        pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
    },

    legend: {
        align: 'center',
        verticalAlign: 'bottom',
        layout: 'vertical'
    },
 colors: ['#9AB1C5', '#F9B655', '#48BDD7'],
    series: [{
        name: 'Customer-Centric Leaders',
        data: [10, 15, 12],
        pointPlacement: 'on'
    }, {
        name: 'Life Sciences Industry Benchmark',
        data: [5, 6, 4],
        pointPlacement: 'on'
    }, {
        name: 'Your company',
        data: [2, 3, 3],
        pointPlacement: 'on'
    }],
  plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },
labels: {
      useHTML: true,
      allowOverlap: true,
      style: {
        wordBreak: 'break-all',
        textOverflow: 'allow'
      }
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                },
                pane: {
                    size: '70%'
    ...