Chris Chris - 5 months ago 364
CSS Question

How to reduce the number of points shown on line chartjs chart with a large dataset?

I have a data set of 100 data points, of which I'd only like to show 10 points, since showing all 100 dots looks too cluttered.

Here's my codepen: http://codepen.io/chriscruz/pen/XmEaxR

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>

<body>
<canvas id="myChart" width="400" height="400"></canvas>


<script>
// Get the context of the canvas element we want to select

var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}

];

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointDot : false,
pointHighlightStroke: "rgba(220,220,220,1)",

data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]
}
]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data);

</script>
</body>

</html>


I utilized the documentation here, which suggests adding 'pointDot : false' would have the chart not show a dot for every point.

Answer

You need to make a custom modification to the ChartJS library. ChartJS by default has no options to skip X labels. Checkout this library https://github.com/hay-wire/Chart.js/tree/skip-xlabels which has a modification to allow you to show a certain number of X labels per tick by calling {showXLabels: 10}.

lineChart = new Chart(ctxlc).Line(datalc, {
    showXLabels: 10
});

If that is too complicated / you need to keep your current chart JS library it is easy enough to pass empty quotes as each label so that all the points show but only some labels do.

Maybe I got off track here, but if you really only want to show 10 points and not 100, why not just pass only those 10 points to the chartJS library? I'm assuming you only want to show a limited number of labels?

Comments