<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Drug Statistics of TPD Pima County Arrests 2018</title>
 
  </head>
  <body onload="killBrand()">
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
    <div id="chartdiv"></div>

    <script>
      function killBrand() {
        document.querySelector("#chartdiv > div:nth-child(2) > svg > g > g:nth-child(2) > g:nth-child(2) > g > g:nth-child(3)").style.display  = "none";
      }

    </script>
  </body>
</html>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #ffffff;
  overflow: hidden;
  margin: 0;
}

#chartdiv {
  width: 100%;
  max-height: 600px;
  height: 100vh;
}
/**
 * @license
 * Copyright (c) 2018 amCharts (Antanas Marcelionis, Martynas Majeris)
 *
 * This sofware is provided under multiple licenses. Please see below for
 * links to appropriate usage.
 *
 * Free amCharts linkware license. Details and conditions:
 * https://github.com/amcharts/amcharts4/blob/master/LICENSE
 *
 * One of the amCharts commercial licenses. Details and pricing:
 * https://www.amcharts.com/online-store/
 * https://www.amcharts.com/online-store/licenses-explained/
 *
 * If in doubt, contact amCharts at contact@amcharts.com
 *
 * PLEASE DO NOT REMOVE THIS COPYRIGHT NOTICE.
 * @hidden
 */
am4internal_webpackJsonp(["ab45"],{lhmh:function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=a("01H4"),n=function(t){Object(i.a)(t,"SpriteState")&&(t.transitionDuration=400),Object(i.a)(t,"Component")&&(t.rangeChangeDuration=700,t.interpolationDuration=700,t.sequencedInterpolation=!1,Object(i.a)(t,"SankeyDiagram")&&(t.sequencedInterpolation=!0),Object(i.a)(t,"FunnelSeries")&&(t.sequencedInterpolation=!0)),Object(i.a)(t,"Chart")&&(t.defaultState.transitionDuration=2e3,t.hiddenState.transitionDuration=1e3),Object(i.a)(t,"Tooltip")&&(t.animationDuration=400,t.defaultState.transitionDuration=400,t.hiddenState.transitionDuration=400),Object(i.a)(t,"Scrollbar")&&(t.animationDuration=700),Object(i.a)(t,"Series")&&(t.defaultState.transitionDuration=1e3,t.hiddenState.transitionDuration=700,t.hiddenState.properties.opacity=1,t.showOnInit=!0),Object(i.a)(t,"MapSeries")&&(t.hiddenState.properties.opacity=0),Object(i.a)(t,"PercentSeries")&&(t.hiddenState.properties.opacity=0),Object(i.a)(t,"FunnelSlice")&&(t.defaultState.transitionDuration=800,t.hiddenState.transitionDuration=1e3,t.hiddenState.properties.opacity=1),Object(i.a)(t,"Slice")&&(t.defaultState.transitionDuration=700,t.hiddenState.transitionDuration=1e3,t.hiddenState.properties.opacity=1),Object(i.a)(t,"Preloader")&&(t.hiddenState.transitionDuration=2e3),Object(i.a)(t,"Column")&&(t.defaultState.transitionDuration=700,t.hiddenState.transitionDuration=1e3,t.hiddenState.properties.opacity=1),Object(i.a)(t,"Column3D")&&(t.hiddenState.properties.opacity=0)};window.am4themes_animated=n}},["lhmh"]);
am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
    "category": "65,459: Total Arrests By TPD 2018",
    "value2": 10970,
    "value1": 54489,
},]

chart.colors.step = 2;
chart.padding(30, 30, 10, 30);

chart.legend = new am4charts.Legend();
chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.interactionsEnabled = false;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;

valueAxis.renderer.minGridDistance = 20;
valueAxis.renderer.minWidth = 35;

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.tooltipText = "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series1.columns.template.column.strokeOpacity = 1;
series1.name = "54,489 Non-Drug";
series1.fill = am4core.color("#FAD7A0");
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.dataFields.valueYShow = "totalPercent";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";
series1.tooltip.dy = - 20;
series1.cursorHoverEnabled = false;

var bullet1 = series1.bullets.push(new am4charts.LabelBullet());
bullet1.label.text = "{valueY.totalPercent.formatNumber('#.00')}%";
bullet1.locationY = 0.5;
bullet1.label.fill = am4core.color("#ffffff");
bullet1.interactionsEnabled = false;

var series2 = chart.series.push(series1.clone());
series2.name = "10,970 Drug";
series2.dataFields.valueY = "value2";
series2.fill = am4core.color("#EC7063");
series2.stroke = series2.fill;
series2.cursorHoverEnabled = false;
/*
var series3 = chart.series.push(series1.clone());
series3.name = "Series 3";
series3.dataFields.valueY = "value3";
series3.fill = chart.colors.next();
series3.stroke = series3.fill;
series3.cursorHoverEnabled = false;
*/
chart.scrollbarX = new am4core.Scrollbar();

chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panX";

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/amcharts.js