Line

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/samples/sparkline-charts/line-chart/data.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-sparkline.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-table.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/dark_turquoise.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container">
  </div>
  

  <script>

    anychart.onDocumentReady(function () {
	// set chart theme
anychart.theme('darkTurquoise');
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/sparkline-charts/line-chart/data.js
      // prepare the data for charts
      var argentinaNominal = getArgentinaNominalData(); 
      var australiaNominal = getAustraliaNominalData(); 
      var austriaNominal = getAustriaNominalData(); 
      var belgiumNominal = getBelgiumNominalData(); 
      var brazilNominal = getBrazilNominalData(); 
      var bulgariaNominal = getBulgariaNominalData(); 
      var canadaNominal = getCanadaNominalData(); 
      var chileNominal = getChileNominalData(); 
      var chinaNominal = getChinaNominalData(); 
      var croatiaNominal = getCroatiaNominalData(); 
      var czechNominal = getCzechNominal(); 
      var denmarkNominal = getDenmarkNominalData(); 
      var estoniaNominal = getEstoniaNominalData(); 
      var euroareaNominal = getEuroareaNominalData(); 
      var finlandNominal = getFinlandNominalData(); 
      var franceNominal = getFranceNominalData(); 
      var germanyNominal = getGermanyNominalData(); 
      var greeceNominal = getGreeceNominalData(); 

      var argentinaReal = getArgentinaRealData(); 
      var australiaReal = getAustraliaRealData(); 
      var austriaReal = getAustriaRealData(); 
      var belgiumReal = getBelgiumRealData(); 
      var brazilReal = getBrazilRealData(); 
      var bulgariaReal = getBulgariaRealData(); 
      var canadaReal = getCanadaRealData(); 
      var chileReal = getChileRealData(); 
      var chinaReal = getChinaRealData(); 
      var croatiaReal = getCroatiaRealData(); 
      var czechReal = getCzechRealData(); 
      var denmarkReal = getDenmarkRealData(); 
      var estoniaReal = getEstoniaRealData(); 
      var euroareaReal = getEuroareaRealData(); 
      var finlandReal = getFinlandRealData(); 
      var franceReal = getFranceRealData(); 
      var germanyReal = getGermanyRealData(); 
      var greeceReal = getGreeceRealData(); 

      // create table, this table provide layout for the sparkline charts
      var table = anychart.standalones.table();
      // set table size settings
      table.bounds('5%', '20px', '90%', '90%');
      // set table contents (sparkline charts and text)
      table.contents([
        [
          null,
          'Nominal Exchange Rate',
          null,
          null,
          'Real Exchange Rate',
          null,
          null
        ],
        [
          'Country',
          'Jan 94',
          '148 Months',
          'Apr 06',
          'Jan 94',
          '148 Months',
          'Apr 06'
        ],
        [
          'Argentina',
          first(argentinaNominal),
          createSparkline(argentinaNominal).minMarkers(true).maxMarkers(true),
          last(argentinaNominal),
          first(argentinaReal),
          createSparkline(argentinaReal),
          last(argentinaReal)
        ],
        [
          'Australia',
          first(australiaNominal),
          createSparkline(australiaNominal),
          last(australiaNominal),
          first(australiaReal),
          createSparkline(australiaReal),
          last(australiaReal)
        ],
        [
          'Austria',
          first(austriaNominal),
          createSparkline(austriaNominal),
          last(austriaNominal),
          first(austriaReal),
          createSparkline(austriaReal),
          last(austriaReal)
        ],
        [
          'Belgium',
          first(belgiumNominal),
          createSparkline(belgiumNominal),
          last(belgiumNominal),
          first(belgiumReal),
          createSparkline(belgiumReal),
          last(belgiumReal)
        ],
        [
          'Brazil',
          first(brazilNominal),
          createSparkline(brazilNominal),
          last(brazilNominal),
          first(brazilReal),
          createSparkline(brazilReal),
          last(brazilReal)
        ],
        [
          'Bulgaria',
          first(bulgariaNominal),
          createSparkline(bulgariaNominal),
          last(bulgariaNominal),
          first(bulgariaReal),
          createSparkline(bulgariaReal),
          last(bulgariaReal)
        ],
        [
          'Canada',
          first(canadaNominal),
          createSparkline(canadaNominal),
          last(canadaNominal),
          first(canadaReal),
          createSparkline(canadaReal),
          last(canadaReal)
        ],
        [
          'Chile',
          first(chileNominal),
          createSparkline(chileNominal),
          last(chileNominal),
          first(chileReal),
          createSparkline(chileReal),
          last(chileReal)
        ],
        [
          'China',
          first(chinaNominal),
          createSparkline(chinaNominal),
          last(chinaNominal),
          first(chinaReal),
          createSparkline(chinaReal),
          last(chinaReal)
        ],
        [
          'Croatia',
          first(croatiaNominal),
          createSparkline(croatiaNominal),
          last(croatiaNominal),
          first(croatiaReal),
          createSparkline(croatiaReal),
          last(croatiaReal)
        ],
        [
          'Czech republic',
          first(czechNominal),
          createSparkline(czechNominal),
          last(czechNominal),
          first(czechReal),
          createSparkline(czechReal),
          last(czechReal)
        ],
        [
          'Denmark',
          first(denmarkNominal),
          createSparkline(denmarkNominal),
          last(denmarkNominal),
          first(denmarkReal),
          createSparkline(denmarkReal),
          last(denmarkReal)
        ],
        [
          'Estonia',
          first(estoniaNominal),
          createSparkline(estoniaNominal),
          last(estoniaNominal),
          first(estoniaReal),
          createSparkline(estoniaReal),
          last(estoniaReal)
        ],
        [
          'Euro area',
          first(euroareaNominal),
          createSparkline(euroareaNominal),
          last(euroareaNominal),
          first(euroareaReal),
          createSparkline(euroareaReal),
          last(euroareaReal)
        ],
        [
          'Finland',
          first(finlandNominal),
          createSparkline(finlandNominal),
          last(finlandNominal),
          first(finlandReal),
          createSparkline(finlandReal),
          last(finlandReal)
        ],
        [
          'France',
          first(franceNominal),
          createSparkline(franceNominal),
          last(franceNominal),
          first(franceReal),
          createSparkline(franceReal),
          last(franceReal)
        ],
        [
          'Germany',
          first(germanyNominal),
          createSparkline(germanyNominal),
          last(germanyNominal),
          first(germanyReal),
          createSparkline(germanyReal),
          last(germanyReal)
        ],
        [
          'Greece',
          first(greeceNominal),
          createSparkline(greeceNominal),
          last(greeceNominal),
          first(greeceReal),
          createSparkline(greeceReal),
          last(greeceReal)
        ]
      ]);

      // set of colors and fonts used in this demo
      var fontFamilyText = '\'Verdana\', Helvetica, Arial, sans-serif';
      var smallHeaderFontColor = '#212121';
      var contentFontColor = '#7c868e';
      var countryFontColor = '#7c868e';
      var borderColor = '#EAEAEA';

      // disable borders for all cells in the table
      table.cellBorder(null);
      // set dashed bottom border for all cells in the table
      table
        .cellBorder()
        .bottom({ color: borderColor, thickness: 1, dash: '1 1 1' });

      // set text settings for all table cells
      table
        .vAlign('middle')
        .fontFamily(fontFamilyText)
        .hAlign('center')
        .fontSize('11px');

      // set cells span
      table.getCell(0, 1).colSpan(3);
      table.getCell(0, 4).colSpan(3);

      // set fixed height for the first rows
      table.getRow(0).height(40);
      table.getRow(1).height(20);

      // set fixed width for some of the tables columns
      table.getCol(0).width(100);
      table.getCol(1).width(60);
      table.getCol(3).width(60);
      table.getCol(4).width(60);
      table.getCol(6).width(60);

      // set main header text and border settings
      var mainHeaderRow = table.getRow(0);
      mainHeaderRow
        .fontColor(contentFontColor)
        .fontSize('14px')
        .hAlign('center');
      mainHeaderRow.cellBorder().bottom('none');

      // set secondary header text and border settings
      var secondaryHeader = table.getRow(1);
      secondaryHeader.fontColor(smallHeaderFontColor).fontSize('12px');
      secondaryHeader.cellBorder().bottom(borderColor);

      // set text settings for columns
      var firstColumn = table.getCol(0);
      firstColumn.fontColor(countryFontColor).hAlign('left');

      // set container id for the table
      table.container('container');
      // draw the table and all elements it contains
      // (you don't need to call the draw method for internal tables and charts)
      table.draw();
    });

    /**
         * Helper function, creates sparkline chart with Line type using anychart.sparkline method,
         * sets passed data and visual preference.
         * @param {Array} array Sparkline data.
         * @return {anychart.charts.Sparkline} New sparkline chart with passed data.
         */
    function createSparkline(array) {
      return anychart
        .sparkline()
        .data(array)
        .seriesType('line')
        .padding(5)
        .stroke('1.2 #64b5f6')
        .maxMarkers(true)
        .minMarkers(true);
    }

    /**
         * Helper function, returns first value of array.
         * @param {Array} array
         * @return {number}
         */
    function first(array) {
      return array[0];
    }

    /**
         * Helper function, returns last value of array.
         * @param {Array} array
         * @return {number}
         */
    function last(array) {
      return array[array.length - 1];
    }
  
</script>
</body>
</html>
Sparklines are small charts, typically drawn without axes or axes labels. They display the changes’ trends in general; usually those changes are in temperature, rates or prices, in a simple and compressed form. They can be embedded in text or grouped together in a table. Whereas the typical charts are supposed to show as much as possible, sparklines are designed to show as less as possible without loss of information content.
This Sparkline Line chart shows exchange rates changed over a period of time from January 1994 till April 2006 in different countries. Actually, there are a lot of different sparkline charts organized in one table, so it looks as one big chart. All sparklines in the table are of line series type and have the same number of points. The most important points (min and max) are marked. Nothing is hovered or selected: those options are not quite necessary for sparklines.
Warning!

Line

Line
