JSFiddle - React, Tailwind, and code Playground

by glennpierce

HTML

<script src="http://dygraphs.com/dygraph-dev.js"></script>
<!-- You may set style: "width: ...; height: ..." to size the chart -->
<div id="graph"></div>

CSS

/*
Relevant CSS classes include:

Labels on the X & Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2

Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label

The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/
 .dygraph-title {
    color: gray;
}

JavaScript

// This function draws bars for a single series. See
// multiColumnBarPlotter below for a plotter which can draw multi-series
// bar charts.
function barChartPlotter(e) {
    var ctx = e.drawingContext;
    var points = e.points;
    var y_bottom = e.dygraph.toDomYCoord(0);

    // The RGBColorParser class is provided by rgbcolor.js, which is
    // packed in with dygraphs.
    var color = new RGBColorParser(e.color);
    color.r = Math.floor((255 + color.r) / 2);
    color.g = Math.floor((255 + color.g) / 2);
    color.b = Math.floor((255 + color.b) / 2);
    ctx.fillStyle = color.toRGB();

    // Find the minimum separation between x-values.
    // This determines the bar width.
    var min_sep = Infinity;
    for (var i = 1; i < points.length; i++) {
        var sep = points[i].canvasx - points[i - 1].canvasx;
        if (sep < min_sep) min_sep = sep;
    }
    var bar_width = Math.floor(2.0 / 3 * min_sep);

    // Do the actual plotting.
    for (var i = 0; i < points.length; i++) {
        var p = points[i];
        var center_x = p.canvasx;

        ctx.fillRect(center_x - bar_width / 2, p.canvasy,
        bar_width, y_bottom - p.canvasy);

        ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
        bar_width, y_bottom - p.canvasy);
    }
}


var plot = null;
//"/energycsv"
if (plot) {
    plot.destroy();
}



plot = new Dygraph(
document.getElementById("graph"), [
    ["1", 44],
    ["2", 45],
    ["3", 56],
    ["4", 67], ], {
    labels: ["House", "Imported"],
    includeZero: true,
    //showRoller: false,
    //strokeWidth: 5.0,
    //colors: ['#009cff'],
    stepPlot: true,
    legend: 'always',
    drawXGrid: false,
    labelsDivStyles: {
        'textAlign': 'right'
    },
    dateWindow: [.5, 4.5],
    xAxisLabelWidth: 100,
    axes: {
      x: {
          ticker : function() {
              return [{ v: 1, label: "LONGLONGH1"}, {v: 2, label: "LONGLONGH2"}, {v: 3, label: "LONGLONGH3"}, {v: 4, label: "LONGLONGH4"}];
          }
      }
   ...