JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<!-- highcharts/demo/bar-basic -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

CSS

/* highcharts/demo/bar-basic */

JavaScript

/* highcharts/demo/bar-basic */

$(function () {
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: false
    },
    xAxis: {
      categories: ['총점수', '신체적 문제', '대인관계 문제', '개인내적 문제', '충돌조절 문제', '사회적 책임감 문제'],
      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: null
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      valueSuffix: ''
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      }
    },
    colors: [
      '#0066cb'
    ],
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
		},
    series: [{
      name: 'Value',
      data: [{
        y: 4,
        color:'#42505a'
      }, 6, 7, 9, 5, 4]
    }]
  });
});