Trend Lines

<!-- wp:paragraph --> <p>You can create real analytical trendlines, indicators, and other annotations with <a href="https://www.amcharts.com/stock-chart/">amCharts Stock Chart</a> but when you need something simple you can just use the core tools at your disposal in the XY Charts.</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2>Key implementation details</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>To imitate trendlines we simple add extra line series with just two data points at the ends of the line.</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2>Related tutorials</h2> <!-- /wp:heading --> <!-- wp:list --> <ul><!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/">XY Chart</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/">Line series</a></li> <!-- /wp:list-item --></ul> <!-- /wp:list -->

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-shape@3"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 5.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v5/
 * ---------------------------------------
 */

// 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)
]);

/* root.dateFormatter.setAll({
  dateFormat: "yyyy",
  dateFields: ["valueX"]
}); */


var data = [
  { category: 1, value: 14, count: 10, },
  { category: 2, value: 11, count: 10, },
  { category: 3, value: 12, count: 10, },
  { category: 4, value: 14, count: 10, },
  { category: 5, value: 11, count: 10, },
  { category: 6, value: 11, count: 10, },
  { category: 7, value: 12, count: 10, },
  { category: 8, value: 12, count: 10, },
  { category: 9, value: 13, count: 10, },
  { category: 10, value: 15, count: 10, },
  { category: 11, value: 19, count: 10, },
  { category: 12, value: 21, count: 10, },
  { category: 13, value: 22, count: 10, },
  { category: 14, value: 20, count: 10, },
  { category: 15, value: 18, count: 10, },
  { category: 16, value: 14, count: 10, },
  { category: 17, value: 16, count: 10, },
  { category: 18, value: 18, count: 10, },
  { category: 19, value: 17, count: 10, },
  { category: 20, value: 15, count: 10, },
  { category: 21, value: 12, count: 10, },
  { category: 22, value: 8, count: 10, },
  { category: 23, value: 1, count: 10, }
];
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    focusable: true,
    panX: false,
    panY: false,
    wheelX: "none",
    wheelY: "none",
  pinchZoomX:true,
  layout:root.verticalLayout
  })
);

var easing = am5.ease.linear;

// Create axes
//...