html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

.anychart-embed-src-bar-charts-bar-chart {

  max-width: 800px;

  min-height: 450px;

  width: 80vw;

  height: 80vh;

  margin: 0 auto;

}

anychart.onDocumentReady(function () {

  // settings

  let containerId = "container",

    highlightLabel = "Average Tuition";

​

  // theme settings

  let customTheme = {

    bar: {

      defaultFontSettings: {

        fontFamily: "sofia-pro, sans-serif",

        bar: {

          normal: {

            labels: {

              enabled: true,

              fontColor: "#ffffff"

            }

          }

        }

      },

      title: {

        text: "Tuition and Fees 2018 - 2019",

        fontSize: "20px",

        fontColor: "#003a70",

        fontWeight: "bold",

        fontFamily: "sofia-pro, sans-serif",

        enabled: true

      },

      palette: {

        type: "distinct",

        items: ["#003a70"]

      }

    }

  };

​

  // create bar series with passed data

  let data = anychart.data.set([

    { x: "W&M", title: "William & Mary", value: "23400" },

    { x: "VMI", title: "Virginia Military Institute", value: "18862" },

    { x: "UVA", title: "University of Virginia", value: "16520" },

    { x: "CNU", title: "Christopher Newport", value: "14754" },

    { x: "VT", title: "Virginia Tech", value: "13620" },

    { x: "LWU", title: "Longwood", value: "13590" },

    {

      x: "Average Tuition",

      title: "Average Tuition & Fees",

      value: "13210",

      fill: "#009933",

      stroke: null,

      label: { enabled: true, fontColor: "#93328e" }

    },

    { x: "UMW", title: "Mary Washington", value: "12714" },

    { x: "GMU", title: "George Mason", value: "12462" },

    { x: "JMU", title: "James Madison", value: "12016" },

    { x: "RU", title: "Radford", value: "11210" },

    { x: "ODU", title: "Old Dominion", value: "10872" },

    { x: "UVA-Wise", title: "University of Virginia - Wise", value: "10119" },

    { x: "NSU", title: "Norfolk State", value: "9490" },

    { x: "VSU", title: "Virginia State University", value: "9056" }

  ]);

​

  // map the data

  const seriesData = data.mapAs({

    x: "x",

    value: "value",

    fill: "fill",

    stroke: "stroke",

    title: "title",

    label: "label",

    yAxis: "yAxis"

  });

​

  anychart.theme(customTheme);

​

  // create bar chart

  const chart = anychart.bar();

​

  const series = chart.bar(seriesData);

​

  chart.animation(true);

​

  chart.padding([10, 40, 5, 20]);

​

  // set tooltip settings

  series

    .tooltip()

    .position("right")

    .anchor("left-center")

    .offsetX(5)

    .offsetY(0)

    .titleFormat("{%Title}")

    .format("${%Value}{groupsSeparator:\\,}");

​

  //Enable and format the bar labels

  chart.labels(true);

  chart.labels().format("${%Value}{groupsSeparator:\\,}");

  chart.labels().background().enabled(true).fill('white 0.7');

  chart.labels().background().cornerType("round").corners(5, 5, 5, 5);

​

  // set yAxis labels formatter

  chart.yAxis().labels().format("${%Value}{groupsSeparator:\\,}");

​

  // set titles for axises

  chart.yAxis().title("One year of tuition");

  chart.interactivity().hoverMode("by-x");

  chart.tooltip().positionMode("point");

​

  // set scale minimum

  chart.yScale().minimum(0);

​

  // set container id for the chart

  chart.container(containerId);

​

  // initiate chart drawing

  chart.draw();

​

  // wait until chart is displayed

  chart.listen("chartDraw", function () {

    // get a number of labels on the Y axis

    var count = chart.xAxis().labels().getLabelsCount();

​

    // go to through all labels

    for (var i = 0; i < count; i++) {

      // get label object

      let label = chart.xAxis().labels().getLabel(i);

​

      // get value of the label of this bar

      let value = chart.xAxis().scale().ticks().get()[i];

​

      if (value === highlightLabel) {

        label.fontColor("#93328e");

        label.draw();

      }

    }

  });

});

​