@amcharts/amcharts5-mcp 1.6.0 → 1.7.0

package/extended/examples/column-bar/heat-map-with-legend.md

@@ -2,834 +2,839 @@
 title: "Heat Map with Legend"
 source: "https://www.amcharts.com/demos/heat-map-with-legend/"
 category: "column-bar"
-scraped: "2026-09-29"
+scraped: "2026-10-08"
 ---
 
-Heat map (also known as Heatmap, Heat table, Shading matrix) represents data in a rectangular matrix where individual values are differentiated by color.
-Heat rules
-Heat rules allow modifying element's properties based on its related value in data, like for instance, color of the columns on this charts.
-[More about head rules](https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/)
-Heat legend
-A perfect companion for any color-based heat maps, a head legend can show the spectrum of values and their relation to colors.
-Furthermore, utilizing chart events, it's possible to further enhance UX by showing exact position of hovered element in the whole spectrum.
-[More about head legend](https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/)
+A week, hour by hour: each cell is colored from yellow to red by its value, and the legend below gives the scale. Weekday working hours glow red, while the weekend stays pale.
+
+When a heat map works: A heat map swaps numbers for colors, so a table of 168 values becomes a pattern you see at once: busy hours, quiet days, the odd spike. It suits two categories that cross, like days and hours, where a line or column chart would need a series for every row.
+
+Good for:
+- Website traffic or sales by day and hour
+- Schedules, bookings and occupancy
+- Spotting patterns in a big table
+
+Think twice when:
+- Exact values: colors give a rough reading, so add tooltips or labels
+- Readers with color vision deficiency: pick a scale that also changes in lightness
+- A trend over weeks or months: a line chart shows it better
+
+Prompt: Create a heat map of values by weekday and hour of the day, highest in weekday working hours, with the cells colored by value and a heat legend that marks a cell’s value when the pointer is over it. Add tooltips. Use the amCharts 5 library with its Responsive theme.
 
 ## JavaScript
 
 ```javascript
-// Create root element
-// https://www.amcharts.com/docs/v5/getting-started/#Root_element
-var root = am5.Root.new("chartdiv");
-
-
-// Set themes
-// https://www.amcharts.com/docs/v5/concepts/themes/
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
-
-
-// Create chart
-// https://www.amcharts.com/docs/v5/charts/xy-chart/
-var chart = root.container.children.push(am5xy.XYChart.new(root, {
-  panX: false,
-  panY: false,
-  wheelX: "none",
-  wheelY: "none",
-  paddingLeft: 0,
-  layout: root.verticalLayout
-}));
-
-
-// Create axes and their renderers
-var yRenderer = am5xy.AxisRendererY.new(root, {
-  visible: false,
-  minGridDistance: 20,
-  inversed: true,
-  minorGridEnabled: true
-});
-
-yRenderer.grid.template.set("visible", false);
-
-var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
-  maxDeviation: 0,
-  renderer: yRenderer,
-  categoryField: "weekday"
-}));
-
-var xRenderer = am5xy.AxisRendererX.new(root, {
-  visible: false,
-  minGridDistance: 30,
-  opposite:true,
-  minorGridEnabled: true
-});
-
-xRenderer.grid.template.set("visible", false);
-
-var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
-  renderer: xRenderer,
-  categoryField: "hour"
-}));
-
-
-// Create series
-// https://www.amcharts.com/docs/v5/charts/xy-chart/#Adding_series
-var series = chart.series.push(am5xy.ColumnSeries.new(root, {
-  calculateAggregates: true,
-  stroke: am5.color(0xffffff),
-  clustered: false,
-  xAxis: xAxis,
-  yAxis: yAxis,
-  categoryXField: "hour",
-  categoryYField: "weekday",
-  valueField: "value"
-}));
-
-series.columns.template.setAll({
-  tooltipText: "{value}",
-  strokeOpacity: 1,
-  strokeWidth: 2,
-  width: am5.percent(100),
-  height: am5.percent(100)
-});
-
-series.columns.template.events.on("pointerover", function(event) {
-  var di = event.target.dataItem;
-  if (di) {
-    heatLegend.showValue(di.get("value", 0));
-  }
-});
-
-series.events.on("datavalidated", function() {
-  heatLegend.set("startValue", series.getPrivate("valueHigh"));
-  heatLegend.set("endValue", series.getPrivate("valueLow"));
-});
-
-
-// Set up heat rules
-// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
-series.set("heatRules", [{
-  target: series.columns.template,
-  min: am5.color(0xfffb77),
-  max: am5.color(0xfe131a),
-  dataField: "value",
-  key: "fill"
-}]);
-
-
-// Add heat legend
-// https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/
-var heatLegend = chart.bottomAxesContainer.children.push(am5.HeatLegend.new(root, {
-  orientation: "horizontal",
-  endColor: am5.color(0xfffb77),
-  startColor: am5.color(0xfe131a)
-}));
-
-
-// Set data
-// https://www.amcharts.com/docs/v5/charts/xy-chart/#Setting_data
-var data = [{
-  hour: "12pm",
-  weekday: "Sunday",
-  value: 2990
-}, {
-  hour: "1am",
-  weekday: "Sunday",
-  value: 2520
-}, {
-  hour: "2am",
-  weekday: "Sunday",
-  value: 2334
-}, {
-  hour: "3am",
-  weekday: "Sunday",
-  value: 2230
-}, {
-  hour: "4am",
-  weekday: "Sunday",
-  value: 2325
-}, {
-  hour: "5am",
-  weekday: "Sunday",
-  value: 2019
-}, {
-  hour: "6am",
-  weekday: "Sunday",
-  value: 2128
-}, {
-  hour: "7am",
-  weekday: "Sunday",
-  value: 2246
-}, {
-  hour: "8am",
-  weekday: "Sunday",
-  value: 2421
-}, {
-  hour: "9am",
-  weekday: "Sunday",
-  value: 2788
-}, {
-  hour: "10am",
-  weekday: "Sunday",
-  value: 2959
-}, {
-  hour: "11am",
-  weekday: "Sunday",
-  value: 3018
-}, {
-  hour: "12am",
-  weekday: "Sunday",
-  value: 3154
-}, {
-  hour: "1pm",
-  weekday: "Sunday",
-  value: 3172
-}, {
-  hour: "2pm",
-  weekday: "Sunday",
-  value: 3368
-}, {
-  hour: "3pm",
-  weekday: "Sunday",
-  value: 3464
-}, {
-  hour: "4pm",
-  weekday: "Sunday",
-  value: 3746
-}, {
-  hour: "5pm",
-  weekday: "Sunday",
-  value: 3656
-}, {
-  hour: "6pm",
-  weekday: "Sunday",
-  value: 3336
-}, {
-  hour: "7pm",
-  weekday: "Sunday",
-  value: 3292
-}, {
-  hour: "8pm",
-  weekday: "Sunday",
-  value: 3269
-}, {
-  hour: "9pm",
-  weekday: "Sunday",
-  value: 3300
-}, {
-  hour: "10pm",
-  weekday: "Sunday",
-  value: 3403
-}, {
-  hour: "11pm",
-  weekday: "Sunday",
-  value: 3323
-}, {
-  hour: "12pm",
-  weekday: "Monday",
-  value: 3346
-}, {
-  hour: "1am",
-  weekday: "Monday",
-  value: 2725
-}, {
-  hour: "2am",
-  weekday: "Monday",
-  value: 3052
-}, {
-  hour: "3am",
-  weekday: "Monday",
-  value: 3876
-}, {
-  hour: "4am",
-  weekday: "Monday",
-  value: 4453
-}, {
-  hour: "5am",
-  weekday: "Monday",
-  value: 3972
-}, {
-  hour: "6am",
-  weekday: "Monday",
-  value: 4644
-}, {
-  hour: "7am",
-  weekday: "Monday",
-  value: 5715
-}, {
-  hour: "8am",
-  weekday: "Monday",
-  value: 7080
-}, {
-  hour: "9am",
-  weekday: "Monday",
-  value: 8022
-}, {
-  hour: "10am",
-  weekday: "Monday",
-  value: 8446
-}, {
-  hour: "11am",
-  weekday: "Monday",
-  value: 9313
-}, {
-  hour: "12am",
-  weekday: "Monday",
-  value: 9011
-}, {
-  hour: "1pm",
-  weekday: "Monday",
-  value: 8508
-}, {
-  hour: "2pm",
-  weekday: "Monday",
-  value: 8515
-}, {
-  hour: "3pm",
-  weekday: "Monday",
-  value: 8399
-}, {
-  hour: "4pm",
-  weekday: "Monday",
-  value: 8649
-}, {
-  hour: "5pm",
-  weekday: "Monday",
-  value: 7869
-}, {
-  hour: "6pm",
-  weekday: "Monday",
-  value: 6933
-}, {
-  hour: "7pm",
-  weekday: "Monday",
-  value: 5969
-}, {
-  hour: "8pm",
-  weekday: "Monday",
-  value: 5552
-}, {
-  hour: "9pm",
-  weekday: "Monday",
-  value: 5434
-}, {
-  hour: "10pm",
-  weekday: "Monday",
-  value: 5070
-}, {
-  hour: "11pm",
-  weekday: "Monday",
-  value: 4851
-}, {
-  hour: "12pm",
-  weekday: "Tuesday",
-  value: 4468
-}, {
-  hour: "1am",
-  weekday: "Tuesday",
-  value: 3306
-}, {
-  hour: "2am",
-  weekday: "Tuesday",
-  value: 3906
-}, {
-  hour: "3am",
-  weekday: "Tuesday",
-  value: 4413
-}, {
-  hour: "4am",
-  weekday: "Tuesday",
-  value: 4726
-}, {
-  hour: "5am",
-  weekday: "Tuesday",
-  value: 4584
-}, {
-  hour: "6am",
-  weekday: "Tuesday",
-  value: 5717
-}, {
-  hour: "7am",
-  weekday: "Tuesday",
-  value: 6504
-}, {
-  hour: "8am",
-  weekday: "Tuesday",
-  value: 8104
-}, {
-  hour: "9am",
-  weekday: "Tuesday",
-  value: 8813
-}, {
-  hour: "10am",
-  weekday: "Tuesday",
-  value: 9278
-}, {
-  hour: "11am",
-  weekday: "Tuesday",
-  value: 10425
-}, {
-  hour: "12am",
-  weekday: "Tuesday",
-  value: 10137
-}, {
-  hour: "1pm",
-  weekday: "Tuesday",
-  value: 9290
-}, {
-  hour: "2pm",
-  weekday: "Tuesday",
-  value: 9255
-}, {
-  hour: "3pm",
-  weekday: "Tuesday",
-  value: 9614
-}, {
-  hour: "4pm",
-  weekday: "Tuesday",
-  value: 9713
-}, {
-  hour: "5pm",
-  weekday: "Tuesday",
-  value: 9667
-}, {
-  hour: "6pm",
-  weekday: "Tuesday",
-  value: 8774
-}, {
-  hour: "7pm",
-  weekday: "Tuesday",
-  value: 8649
-}, {
-  hour: "8pm",
-  weekday: "Tuesday",
-  value: 9937
-}, {
-  hour: "9pm",
-  weekday: "Tuesday",
-  value: 10286
-}, {
-  hour: "10pm",
-  weekday: "Tuesday",
-  value: 9175
-}, {
-  hour: "11pm",
-  weekday: "Tuesday",
-  value: 8581
-}, {
-  hour: "12pm",
-  weekday: "Wednesday",
-  value: 8145
-}, {
-  hour: "1am",
-  weekday: "Wednesday",
-  value: 7177
-}, {
-  hour: "2am",
-  weekday: "Wednesday",
-  value: 5657
-}, {
-  hour: "3am",
-  weekday: "Wednesday",
-  value: 6802
-}, {
-  hour: "4am",
-  weekday: "Wednesday",
-  value: 8159
-}, {
-  hour: "5am",
-  weekday: "Wednesday",
-  value: 8449
-}, {
-  hour: "6am",
-  weekday: "Wednesday",
-  value: 9453
-}, {
-  hour: "7am",
-  weekday: "Wednesday",
-  value: 9947
-}, {
-  hour: "8am",
-  weekday: "Wednesday",
-  value: 11471
-}, {
-  hour: "9am",
-  weekday: "Wednesday",
-  value: 12492
-}, {
-  hour: "10am",
-  weekday: "Wednesday",
-  value: 9388
-}, {
-  hour: "11am",
-  weekday: "Wednesday",
-  value: 9928
-}, {
-  hour: "12am",
-  weekday: "Wednesday",
-  value: 9644
-}, {
-  hour: "1pm",
-  weekday: "Wednesday",
-  value: 9034
-}, {
-  hour: "2pm",
-  weekday: "Wednesday",
-  value: 8964
-}, {
-  hour: "3pm",
-  weekday: "Wednesday",
-  value: 9069
-}, {
-  hour: "4pm",
-  weekday: "Wednesday",
-  value: 8898
-}, {
-  hour: "5pm",
-  weekday: "Wednesday",
-  value: 8322
-}, {
-  hour: "6pm",
-  weekday: "Wednesday",
-  value: 6909
-}, {
-  hour: "7pm",
-  weekday: "Wednesday",
-  value: 5810
-}, {
-  hour: "8pm",
-  weekday: "Wednesday",
-  value: 5151
-}, {
-  hour: "9pm",
-  weekday: "Wednesday",
-  value: 4911
-}, {
-  hour: "10pm",
-  weekday: "Wednesday",
-  value: 4487
-}, {
-  hour: "11pm",
-  weekday: "Wednesday",
-  value: 4118
-}, {
-  hour: "12pm",
-  weekday: "Thursday",
-  value: 3689
-}, {
-  hour: "1am",
-  weekday: "Thursday",
-  value: 3081
-}, {
-  hour: "2am",
-  weekday: "Thursday",
-  value: 6525
-}, {
-  hour: "3am",
-  weekday: "Thursday",
-  value: 6228
-}, {
-  hour: "4am",
-  weekday: "Thursday",
-  value: 6917
-}, {
-  hour: "5am",
-  weekday: "Thursday",
-  value: 6568
-}, {
-  hour: "6am",
-  weekday: "Thursday",
-  value: 6405
-}, {
-  hour: "7am",
-  weekday: "Thursday",
-  value: 8106
-}, {
-  hour: "8am",
-  weekday: "Thursday",
-  value: 8542
-}, {
-  hour: "9am",
-  weekday: "Thursday",
-  value: 8501
-}, {
-  hour: "10am",
-  weekday: "Thursday",
-  value: 8802
-}, {
-  hour: "11am",
-  weekday: "Thursday",
-  value: 9420
-}, {
-  hour: "12am",
-  weekday: "Thursday",
-  value: 8966
-}, {
-  hour: "1pm",
-  weekday: "Thursday",
-  value: 8135
-}, {
-  hour: "2pm",
-  weekday: "Thursday",
-  value: 8224
-}, {
-  hour: "3pm",
-  weekday: "Thursday",
-  value: 8387
-}, {
-  hour: "4pm",
-  weekday: "Thursday",
-  value: 8218
-}, {
-  hour: "5pm",
-  weekday: "Thursday",
-  value: 7641
-}, {
-  hour: "6pm",
-  weekday: "Thursday",
-  value: 6469
-}, {
-  hour: "7pm",
-  weekday: "Thursday",
-  value: 5441
-}, {
-  hour: "8pm",
-  weekday: "Thursday",
-  value: 4952
-}, {
-  hour: "9pm",
-  weekday: "Thursday",
-  value: 4643
-}, {
-  hour: "10pm",
-  weekday: "Thursday",
-  value: 4393
-}, {
-  hour: "11pm",
-  weekday: "Thursday",
-  value: 4017
-}, {
-  hour: "12pm",
-  weekday: "Friday",
-  value: 4022
-}, {
-  hour: "1am",
-  weekday: "Friday",
-  value: 3063
-}, {
-  hour: "2am",
-  weekday: "Friday",
-  value: 3638
-}, {
-  hour: "3am",
-  weekday: "Friday",
-  value: 3968
-}, {
-  hour: "4am",
-  weekday: "Friday",
-  value: 4070
-}, {
-  hour: "5am",
-  weekday: "Friday",
-  value: 4019
-}, {
-  hour: "6am",
-  weekday: "Friday",
-  value: 4548
-}, {
-  hour: "7am",
-  weekday: "Friday",
-  value: 5465
-}, {
-  hour: "8am",
-  weekday: "Friday",
-  value: 6909
-}, {
-  hour: "9am",
-  weekday: "Friday",
-  value: 7706
-}, {
-  hour: "10am",
-  weekday: "Friday",
-  value: 7867
-}, {
-  hour: "11am",
-  weekday: "Friday",
-  value: 8615
-}, {
-  hour: "12am",
-  weekday: "Friday",
-  value: 8218
-}, {
-  hour: "1pm",
-  weekday: "Friday",
-  value: 7604
-}, {
-  hour: "2pm",
-  weekday: "Friday",
-  value: 7429
-}, {
-  hour: "3pm",
-  weekday: "Friday",
-  value: 7488
-}, {
-  hour: "4pm",
-  weekday: "Friday",
-  value: 7493
-}, {
-  hour: "5pm",
-  weekday: "Friday",
-  value: 6998
-}, {
-  hour: "6pm",
-  weekday: "Friday",
-  value: 5941
-}, {
-  hour: "7pm",
-  weekday: "Friday",
-  value: 5068
-}, {
-  hour: "8pm",
-  weekday: "Friday",
-  value: 4636
-}, {
-  hour: "9pm",
-  weekday: "Friday",
-  value: 4241
-}, {
-  hour: "10pm",
-  weekday: "Friday",
-  value: 3858
-}, {
-  hour: "11pm",
-  weekday: "Friday",
-  value: 3833
-}, {
-  hour: "12pm",
-  weekday: "Saturday",
-  value: 3503
-}, {
-  hour: "1am",
-  weekday: "Saturday",
-  value: 2842
-}, {
-  hour: "2am",
-  weekday: "Saturday",
-  value: 2808
-}, {
-  hour: "3am",
-  weekday: "Saturday",
-  value: 2399
-}, {
-  hour: "4am",
-  weekday: "Saturday",
-  value: 2280
-}, {
-  hour: "5am",
-  weekday: "Saturday",
-  value: 2139
-}, {
-  hour: "6am",
-  weekday: "Saturday",
-  value: 2527
-}, {
-  hour: "7am",
-  weekday: "Saturday",
-  value: 2940
-}, {
-  hour: "8am",
-  weekday: "Saturday",
-  value: 3066
-}, {
-  hour: "9am",
-  weekday: "Saturday",
-  value: 3494
-}, {
-  hour: "10am",
-  weekday: "Saturday",
-  value: 3287
-}, {
-  hour: "11am",
-  weekday: "Saturday",
-  value: 3416
-}, {
-  hour: "12am",
-  weekday: "Saturday",
-  value: 3432
-}, {
-  hour: "1pm",
-  weekday: "Saturday",
-  value: 3523
-}, {
-  hour: "2pm",
-  weekday: "Saturday",
-  value: 3542
-}, {
-  hour: "3pm",
-  weekday: "Saturday",
-  value: 3347
-}, {
-  hour: "4pm",
-  weekday: "Saturday",
-  value: 3292
-}, {
-  hour: "5pm",
-  weekday: "Saturday",
-  value: 3416
-}, {
-  hour: "6pm",
-  weekday: "Saturday",
-  value: 3131
-}, {
-  hour: "7pm",
-  weekday: "Saturday",
-  value: 3057
-}, {
-  hour: "8pm",
-  weekday: "Saturday",
-  value: 3227
-}, {
-  hour: "9pm",
-  weekday: "Saturday",
-  value: 3060
-}, {
-  hour: "10pm",
-  weekday: "Saturday",
-  value: 2855
-}, {
-  hour: "11pm",
-  weekday: "Saturday",
-  value: 2625
-}
-]
-
-series.data.setAll(data);
-
-// Auto-populate X and Y axis category data
-var weekdays = [];
-var hours = [];
-am5.array.each(data, function(row) {
-  if (weekdays.indexOf(row.weekday) == -1) {
-    weekdays.push(row.weekday);
-  }
-  if (hours.indexOf(row.hour) == -1) {
-    hours.push(row.hour);
-  }
-});
-
-
-yAxis.data.setAll(weekdays.map(function(item) {
-  return { weekday: item }
-}));
-
-
-xAxis.data.setAll(hours.map(function(item) {
-  return { hour: item }
-}));
-
-
-// Make stuff animate on load
-// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
+var root = am5.Root.new("chartdiv");
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([
+  am5themes_Animated.new(root),
+  am5themes_Responsive.new(root)
+]);
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+var chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: false,    // no dragging the plot
+  panY: false,
+  wheelX: "none", // the mouse wheel scrolls the page, not the chart
+  wheelY: "none",
+  paddingLeft: 0, // the weekday labels sit at the chart's left edge
+  layout: root.verticalLayout
+}));
+
+// Create axes and their renderers
+var yRenderer = am5xy.AxisRendererY.new(root, {
+  visible: false,      // no axis line
+  minGridDistance: 20, // at least 20px between labels
+  // the first day in the data, Sunday, at the top
+  inversed: true,
+  minorGridEnabled: true
+});
+
+yRenderer.grid.template.set("visible", false); // no grid lines
+
+var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
+  maxDeviation: 0, // no panning past the first or last day
+  renderer: yRenderer,
+  categoryField: "weekday"
+}));
+
+var xRenderer = am5xy.AxisRendererX.new(root, {
+  visible: false, // no axis line
+  // every second hour, so the labels don't run into each other
+  minGridDistance: 50,
+  opposite: true, // the hours along the top
+  minorGridEnabled: true
+});
+
+xRenderer.grid.template.set("visible", false); // no grid lines
+
+var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  renderer: xRenderer,
+  categoryField: "hour"
+}));
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/#Adding_series
+var series = chart.series.push(am5xy.ColumnSeries.new(root, {
+  // works out valueLow and valueHigh, which the heat rules and the legend use
+  calculateAggregates: true,
+  // gaps between the cells in the chart's background color
+  stroke: root.interfaceColors.get("background"),
+  clustered: false,   // a cell never shares its space with other series' columns
+  xAxis: xAxis,
+  yAxis: yAxis,
+  categoryXField: "hour",
+  categoryYField: "weekday",
+  valueField: "value" // the value the heat rules color the cells by
+}));
+
+series.columns.template.setAll({
+  tooltipText: "{categoryY}, {categoryX}: {value}", // as "Sunday, 12am: 2,990"
+  strokeOpacity: 1,        // solid...
+  strokeWidth: 2,          // ...2px gaps
+  width: am5.percent(100), // each cell fills its hour...
+  height: am5.percent(100) // ...and its day
+});
+
+// hovering a cell marks its value on the heat legend
+series.columns.template.events.on("pointerover", function(event) {
+  var di = event.target.dataItem;
+  if (di) {
+    heatLegend.showValue(di.get("value", 0));
+  }
+});
+
+// the legend runs from the lowest value on the left to the highest on the right
+series.events.on("datavalidated", function() {
+  heatLegend.set("startValue", series.getPrivate("valueLow"));
+  heatLegend.set("endValue", series.getPrivate("valueHigh"));
+});
+
+// Set up heat rules
+// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
+series.set("heatRules", [{
+  target: series.columns.template,
+  min: am5.color(0xfffb77), // light yellow for the lowest value...
+  max: am5.color(0xfe131a), // ...red for the highest
+  dataField: "value",
+  key: "fill"               // the heat rule sets each cell's fill
+}]);
+
+// Add heat legend
+// https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/
+var heatLegend = chart.bottomAxesContainer.children.push(am5.HeatLegend.new(root, {
+  orientation: "horizontal",       // a color bar along the bottom
+  marginTop: 10,                   // 10px below the plot
+  startColor: am5.color(0xfffb77), // the same colors as the heat rule
+  endColor: am5.color(0xfe131a)
+}));
+
+// Set data
+// https://www.amcharts.com/docs/v5/charts/xy-chart/#Setting_data
+var data = [{
+  hour: "12am",
+  weekday: "Sunday",
+  value: 2990
+}, {
+  hour: "1am",
+  weekday: "Sunday",
+  value: 2520
+}, {
+  hour: "2am",
+  weekday: "Sunday",
+  value: 2334
+}, {
+  hour: "3am",
+  weekday: "Sunday",
+  value: 2230
+}, {
+  hour: "4am",
+  weekday: "Sunday",
+  value: 2325
+}, {
+  hour: "5am",
+  weekday: "Sunday",
+  value: 2019
+}, {
+  hour: "6am",
+  weekday: "Sunday",
+  value: 2128
+}, {
+  hour: "7am",
+  weekday: "Sunday",
+  value: 2246
+}, {
+  hour: "8am",
+  weekday: "Sunday",
+  value: 2421
+}, {
+  hour: "9am",
+  weekday: "Sunday",
+  value: 2788
+}, {
+  hour: "10am",
+  weekday: "Sunday",
+  value: 2959
+}, {
+  hour: "11am",
+  weekday: "Sunday",
+  value: 3018
+}, {
+  hour: "12pm",
+  weekday: "Sunday",
+  value: 3154
+}, {
+  hour: "1pm",
+  weekday: "Sunday",
+  value: 3172
+}, {
+  hour: "2pm",
+  weekday: "Sunday",
+  value: 3368
+}, {
+  hour: "3pm",
+  weekday: "Sunday",
+  value: 3464
+}, {
+  hour: "4pm",
+  weekday: "Sunday",
+  value: 3746
+}, {
+  hour: "5pm",
+  weekday: "Sunday",
+  value: 3656
+}, {
+  hour: "6pm",
+  weekday: "Sunday",
+  value: 3336
+}, {
+  hour: "7pm",
+  weekday: "Sunday",
+  value: 3292
+}, {
+  hour: "8pm",
+  weekday: "Sunday",
+  value: 3269
+}, {
+  hour: "9pm",
+  weekday: "Sunday",
+  value: 3300
+}, {
+  hour: "10pm",
+  weekday: "Sunday",
+  value: 3403
+}, {
+  hour: "11pm",
+  weekday: "Sunday",
+  value: 3323
+}, {
+  hour: "12am",
+  weekday: "Monday",
+  value: 3346
+}, {
+  hour: "1am",
+  weekday: "Monday",
+  value: 2725
+}, {
+  hour: "2am",
+  weekday: "Monday",
+  value: 3052
+}, {
+  hour: "3am",
+  weekday: "Monday",
+  value: 3876
+}, {
+  hour: "4am",
+  weekday: "Monday",
+  value: 4453
+}, {
+  hour: "5am",
+  weekday: "Monday",
+  value: 3972
+}, {
+  hour: "6am",
+  weekday: "Monday",
+  value: 4644
+}, {
+  hour: "7am",
+  weekday: "Monday",
+  value: 5715
+}, {
+  hour: "8am",
+  weekday: "Monday",
+  value: 7080
+}, {
+  hour: "9am",
+  weekday: "Monday",
+  value: 8022
+}, {
+  hour: "10am",
+  weekday: "Monday",
+  value: 8446
+}, {
+  hour: "11am",
+  weekday: "Monday",
+  value: 9313
+}, {
+  hour: "12pm",
+  weekday: "Monday",
+  value: 9011
+}, {
+  hour: "1pm",
+  weekday: "Monday",
+  value: 8508
+}, {
+  hour: "2pm",
+  weekday: "Monday",
+  value: 8515
+}, {
+  hour: "3pm",
+  weekday: "Monday",
+  value: 8399
+}, {
+  hour: "4pm",
+  weekday: "Monday",
+  value: 8649
+}, {
+  hour: "5pm",
+  weekday: "Monday",
+  value: 7869
+}, {
+  hour: "6pm",
+  weekday: "Monday",
+  value: 6933
+}, {
+  hour: "7pm",
+  weekday: "Monday",
+  value: 5969
+}, {
+  hour: "8pm",
+  weekday: "Monday",
+  value: 5552
+}, {
+  hour: "9pm",
+  weekday: "Monday",
+  value: 5434
+}, {
+  hour: "10pm",
+  weekday: "Monday",
+  value: 5070
+}, {
+  hour: "11pm",
+  weekday: "Monday",
+  value: 4851
+}, {
+  hour: "12am",
+  weekday: "Tuesday",
+  value: 4468
+}, {
+  hour: "1am",
+  weekday: "Tuesday",
+  value: 3306
+}, {
+  hour: "2am",
+  weekday: "Tuesday",
+  value: 3906
+}, {
+  hour: "3am",
+  weekday: "Tuesday",
+  value: 4413
+}, {
+  hour: "4am",
+  weekday: "Tuesday",
+  value: 4726
+}, {
+  hour: "5am",
+  weekday: "Tuesday",
+  value: 4584
+}, {
+  hour: "6am",
+  weekday: "Tuesday",
+  value: 5717
+}, {
+  hour: "7am",
+  weekday: "Tuesday",
+  value: 6504
+}, {
+  hour: "8am",
+  weekday: "Tuesday",
+  value: 8104
+}, {
+  hour: "9am",
+  weekday: "Tuesday",
+  value: 8813
+}, {
+  hour: "10am",
+  weekday: "Tuesday",
+  value: 9278
+}, {
+  hour: "11am",
+  weekday: "Tuesday",
+  value: 10425
+}, {
+  hour: "12pm",
+  weekday: "Tuesday",
+  value: 10137
+}, {
+  hour: "1pm",
+  weekday: "Tuesday",
+  value: 9290
+}, {
+  hour: "2pm",
+  weekday: "Tuesday",
+  value: 9255
+}, {
+  hour: "3pm",
+  weekday: "Tuesday",
+  value: 9614
+}, {
+  hour: "4pm",
+  weekday: "Tuesday",
+  value: 9713
+}, {
+  hour: "5pm",
+  weekday: "Tuesday",
+  value: 9667
+}, {
+  hour: "6pm",
+  weekday: "Tuesday",
+  value: 8774
+}, {
+  hour: "7pm",
+  weekday: "Tuesday",
+  value: 8649
+}, {
+  hour: "8pm",
+  weekday: "Tuesday",
+  value: 9937
+}, {
+  hour: "9pm",
+  weekday: "Tuesday",
+  value: 10286
+}, {
+  hour: "10pm",
+  weekday: "Tuesday",
+  value: 9175
+}, {
+  hour: "11pm",
+  weekday: "Tuesday",
+  value: 8581
+}, {
+  hour: "12am",
+  weekday: "Wednesday",
+  value: 8145
+}, {
+  hour: "1am",
+  weekday: "Wednesday",
+  value: 7177
+}, {
+  hour: "2am",
+  weekday: "Wednesday",
+  value: 5657
+}, {
+  hour: "3am",
+  weekday: "Wednesday",
+  value: 6802
+}, {
+  hour: "4am",
+  weekday: "Wednesday",
+  value: 8159
+}, {
+  hour: "5am",
+  weekday: "Wednesday",
+  value: 8449
+}, {
+  hour: "6am",
+  weekday: "Wednesday",
+  value: 9453
+}, {
+  hour: "7am",
+  weekday: "Wednesday",
+  value: 9947
+}, {
+  hour: "8am",
+  weekday: "Wednesday",
+  value: 11471
+}, {
+  hour: "9am",
+  weekday: "Wednesday",
+  value: 12492
+}, {
+  hour: "10am",
+  weekday: "Wednesday",
+  value: 9388
+}, {
+  hour: "11am",
+  weekday: "Wednesday",
+  value: 9928
+}, {
+  hour: "12pm",
+  weekday: "Wednesday",
+  value: 9644
+}, {
+  hour: "1pm",
+  weekday: "Wednesday",
+  value: 9034
+}, {
+  hour: "2pm",
+  weekday: "Wednesday",
+  value: 8964
+}, {
+  hour: "3pm",
+  weekday: "Wednesday",
+  value: 9069
+}, {
+  hour: "4pm",
+  weekday: "Wednesday",
+  value: 8898
+}, {
+  hour: "5pm",
+  weekday: "Wednesday",
+  value: 8322
+}, {
+  hour: "6pm",
+  weekday: "Wednesday",
+  value: 6909
+}, {
+  hour: "7pm",
+  weekday: "Wednesday",
+  value: 5810
+}, {
+  hour: "8pm",
+  weekday: "Wednesday",
+  value: 5151
+}, {
+  hour: "9pm",
+  weekday: "Wednesday",
+  value: 4911
+}, {
+  hour: "10pm",
+  weekday: "Wednesday",
+  value: 4487
+}, {
+  hour: "11pm",
+  weekday: "Wednesday",
+  value: 4118
+}, {
+  hour: "12am",
+  weekday: "Thursday",
+  value: 3689
+}, {
+  hour: "1am",
+  weekday: "Thursday",
+  value: 3081
+}, {
+  hour: "2am",
+  weekday: "Thursday",
+  value: 6525
+}, {
+  hour: "3am",
+  weekday: "Thursday",
+  value: 6228
+}, {
+  hour: "4am",
+  weekday: "Thursday",
+  value: 6917
+}, {
+  hour: "5am",
+  weekday: "Thursday",
+  value: 6568
+}, {
+  hour: "6am",
+  weekday: "Thursday",
+  value: 6405
+}, {
+  hour: "7am",
+  weekday: "Thursday",
+  value: 8106
+}, {
+  hour: "8am",
+  weekday: "Thursday",
+  value: 8542
+}, {
+  hour: "9am",
+  weekday: "Thursday",
+  value: 8501
+}, {
+  hour: "10am",
+  weekday: "Thursday",
+  value: 8802
+}, {
+  hour: "11am",
+  weekday: "Thursday",
+  value: 9420
+}, {
+  hour: "12pm",
+  weekday: "Thursday",
+  value: 8966
+}, {
+  hour: "1pm",
+  weekday: "Thursday",
+  value: 8135
+}, {
+  hour: "2pm",
+  weekday: "Thursday",
+  value: 8224
+}, {
+  hour: "3pm",
+  weekday: "Thursday",
+  value: 8387
+}, {
+  hour: "4pm",
+  weekday: "Thursday",
+  value: 8218
+}, {
+  hour: "5pm",
+  weekday: "Thursday",
+  value: 7641
+}, {
+  hour: "6pm",
+  weekday: "Thursday",
+  value: 6469
+}, {
+  hour: "7pm",
+  weekday: "Thursday",
+  value: 5441
+}, {
+  hour: "8pm",
+  weekday: "Thursday",
+  value: 4952
+}, {
+  hour: "9pm",
+  weekday: "Thursday",
+  value: 4643
+}, {
+  hour: "10pm",
+  weekday: "Thursday",
+  value: 4393
+}, {
+  hour: "11pm",
+  weekday: "Thursday",
+  value: 4017
+}, {
+  hour: "12am",
+  weekday: "Friday",
+  value: 4022
+}, {
+  hour: "1am",
+  weekday: "Friday",
+  value: 3063
+}, {
+  hour: "2am",
+  weekday: "Friday",
+  value: 3638
+}, {
+  hour: "3am",
+  weekday: "Friday",
+  value: 3968
+}, {
+  hour: "4am",
+  weekday: "Friday",
+  value: 4070
+}, {
+  hour: "5am",
+  weekday: "Friday",
+  value: 4019
+}, {
+  hour: "6am",
+  weekday: "Friday",
+  value: 4548
+}, {
+  hour: "7am",
+  weekday: "Friday",
+  value: 5465
+}, {
+  hour: "8am",
+  weekday: "Friday",
+  value: 6909
+}, {
+  hour: "9am",
+  weekday: "Friday",
+  value: 7706
+}, {
+  hour: "10am",
+  weekday: "Friday",
+  value: 7867
+}, {
+  hour: "11am",
+  weekday: "Friday",
+  value: 8615
+}, {
+  hour: "12pm",
+  weekday: "Friday",
+  value: 8218
+}, {
+  hour: "1pm",
+  weekday: "Friday",
+  value: 7604
+}, {
+  hour: "2pm",
+  weekday: "Friday",
+  value: 7429
+}, {
+  hour: "3pm",
+  weekday: "Friday",
+  value: 7488
+}, {
+  hour: "4pm",
+  weekday: "Friday",
+  value: 7493
+}, {
+  hour: "5pm",
+  weekday: "Friday",
+  value: 6998
+}, {
+  hour: "6pm",
+  weekday: "Friday",
+  value: 5941
+}, {
+  hour: "7pm",
+  weekday: "Friday",
+  value: 5068
+}, {
+  hour: "8pm",
+  weekday: "Friday",
+  value: 4636
+}, {
+  hour: "9pm",
+  weekday: "Friday",
+  value: 4241
+}, {
+  hour: "10pm",
+  weekday: "Friday",
+  value: 3858
+}, {
+  hour: "11pm",
+  weekday: "Friday",
+  value: 3833
+}, {
+  hour: "12am",
+  weekday: "Saturday",
+  value: 3503
+}, {
+  hour: "1am",
+  weekday: "Saturday",
+  value: 2842
+}, {
+  hour: "2am",
+  weekday: "Saturday",
+  value: 2808
+}, {
+  hour: "3am",
+  weekday: "Saturday",
+  value: 2399
+}, {
+  hour: "4am",
+  weekday: "Saturday",
+  value: 2280
+}, {
+  hour: "5am",
+  weekday: "Saturday",
+  value: 2139
+}, {
+  hour: "6am",
+  weekday: "Saturday",
+  value: 2527
+}, {
+  hour: "7am",
+  weekday: "Saturday",
+  value: 2940
+}, {
+  hour: "8am",
+  weekday: "Saturday",
+  value: 3066
+}, {
+  hour: "9am",
+  weekday: "Saturday",
+  value: 3494
+}, {
+  hour: "10am",
+  weekday: "Saturday",
+  value: 3287
+}, {
+  hour: "11am",
+  weekday: "Saturday",
+  value: 3416
+}, {
+  hour: "12pm",
+  weekday: "Saturday",
+  value: 3432
+}, {
+  hour: "1pm",
+  weekday: "Saturday",
+  value: 3523
+}, {
+  hour: "2pm",
+  weekday: "Saturday",
+  value: 3542
+}, {
+  hour: "3pm",
+  weekday: "Saturday",
+  value: 3347
+}, {
+  hour: "4pm",
+  weekday: "Saturday",
+  value: 3292
+}, {
+  hour: "5pm",
+  weekday: "Saturday",
+  value: 3416
+}, {
+  hour: "6pm",
+  weekday: "Saturday",
+  value: 3131
+}, {
+  hour: "7pm",
+  weekday: "Saturday",
+  value: 3057
+}, {
+  hour: "8pm",
+  weekday: "Saturday",
+  value: 3227
+}, {
+  hour: "9pm",
+  weekday: "Saturday",
+  value: 3060
+}, {
+  hour: "10pm",
+  weekday: "Saturday",
+  value: 2855
+}, {
+  hour: "11pm",
+  weekday: "Saturday",
+  value: 2625
+}
+]
+
+series.data.setAll(data);
+
+// Auto-populate X and Y axis category data
+var weekdays = [];
+var hours = [];
+am5.array.each(data, function(row) {
+  if (weekdays.indexOf(row.weekday) == -1) {
+    weekdays.push(row.weekday);
+  }
+  if (hours.indexOf(row.hour) == -1) {
+    hours.push(row.hour);
+  }
+});
+
+yAxis.data.setAll(weekdays.map(function(item) {
+  return { weekday: item }
+}));
+
+xAxis.data.setAll(hours.map(function(item) {
+  return { hour: item }
+}));
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
 chart.appear(1000, 100);
 ```
 
@@ -842,9 +847,10 @@ chart.appear(1000, 100);
 ## CSS
 
 ```css
-#chartdiv {
-  width: 100%;
-  height: 500px;
+#chartdiv {
+  width: 100%;
+  height: 500px;
+  font-size: 0.875rem;
 }
 ```
 
@@ -853,3 +859,4 @@ chart.appear(1000, 100);
 - https://cdn.amcharts.com/lib/5/index.js
 - https://cdn.amcharts.com/lib/5/xy.js
 - https://cdn.amcharts.com/lib/5/themes/Animated.js
+- https://cdn.amcharts.com/lib/5/themes/Responsive.js