JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dimplejs.org/dist/dimple.v1.1.2.min.js"></script>
<div id="chartContainer"></div>
JavaScript
var data = [];
// Pass in an axis object and an interval.
var cleanAxis = function (axis, oneInEvery) {
// This should have been called after draw, otherwise do nothing
if (axis.shapes.length > 0) {
// Leave the first label
var del = false;
// If there is an interval set
if (oneInEvery > 1) {
// Operate on all the axis text
axis.shapes.selectAll("text")
.each(function (d) {
// Remove all but the nth label
if (del % oneInEvery !== 0) {
this.remove();
// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
if (d === d2) {
this.remove();
}
});
}
del += 1;
});
}
}
};
// Make up 1000 data points which don't just fly all over the place
var lastY = 50;
for (var i = 0; i <= 1000; i++)
{
lastY = lastY + (Math.random() * 2 - 1);
if (lastY < 0) {
lastY = 0;
}
data.push({ x: i, y: lastY});
}
// Draw the chart as usual
var svg;
var chart;
var svg = dimple.newSvg("#chartContainer", 800, 600);
var chart = new dimple.chart(svg, data);
chart.defaultColors = [
new dimple.color("#FF0000", "Blue"), // Set a red fill with a blue stroke
new dimple.color("#00FF00"), // Set a green fill with a darker green stroke
new dimple.color("rgb(0, 0, 255)") // Set a blue fill with a darker blue stroke
];
x = chart.addCategoryAxis("x", "x");
chart.addMeasureAxis("y", "y");
chart.addSeries("country", dimple.plot.bar);
// Order the string values as numbers
x.addOrderRule(function (a, b) { return parseFloat(a.x) - parseFloat(b.x); });
chart.draw();
// Invoke the cleaning algorithm to draw 1 label in every 20
cleanAxis(x, 20);