<div class="widget dash-double-width">
    <div class="dash-content">
        <header>
            <h2>Widget name</h2>
            <input type="submit" class="button button-small action-alert" value="Submit">

        </header>

        <div class="body dash-pad">
            <div class="chart">
                <div class="ct-chart ct-double-octave"></div>
            </div>

            <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
            <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
            <script>
                var data = {
                    series: [
                        [6, 3, 5, 4, 7, 1, 6],
                        [1, 2, 2, 3, 4, 7, 2]
                    ]
                };
                var options = {
                    chartPadding: 5,
                    showPoint: false,
                    lineSmooth: false,
                    axisX: {
                        offset: 0,
                        showGrid: false,
                        showLabel: false
                    },
                    axisY: {
                        offset: 0,
                        showGrid: false,
                        showLabel: false
                    }
                };
                new Chartist.Line('.ct-chart', data, options);
            </script>
        </div>
    </div>
</div>
<div class="widget dash-double-width">
  <div class="dash-content">
    {{ render "@widget-header" }}
    <div class="body dash-pad">
			<div class="chart">
				<div class="ct-chart ct-double-octave"></div>
			</div>

			<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
			<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
			<script>
			var data = {
			  series: [
			    [6,3,5,4,7,1,6],
			    [1,2,2,3,4,7,2]
			  ]
			};

			var options = {
			  chartPadding: 5,
			  showPoint: false,
			  lineSmooth: false,
			  axisX: {
			  	offset: 0,
			    showGrid: false,
			    showLabel: false
			  },
			  axisY: {
			  	offset: 0,
			  	showGrid: false,
			  	showLabel: false
			  }
			};

			new Chartist.Line('.ct-chart', data, options);
			</script>
		</div>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .chart .ct-series-a .ct-line {
      stroke: #7C95C8;
      stroke-width: 3px;
    }
    
    .chart .ct-series-b .ct-line {
      stroke: #949494;
      stroke-width: 3px;
    }
  • URL: /components/raw/widget-chart/widget-chart.scss
  • Filesystem Path: src/components/20-dashboard/02-molecules/widget-chart/widget-chart.scss
  • Size: 146 Bytes

Using Chartist.JS

Charts are SVg so we can style them how we want. They’re scalable, but we can also pass in responsiveOptions with media queries etc to change the configuration of the chart and different sizes.

We obviously need to sort out the best way to embed the data etc.