How to set x-axis tick values for Charts.js line chart?

  • Resolved mobilewebexpert

    (@mobilewebexpert)


    4 years, 3 months ago

    This is the first column of data in my csv file:

    My x-axis label
number
0
0.018
17.982
18

    The chart is being displayed with the x-axis tick points being [0, 0.018, 17.982, 18] and evenly spaced (so, therefore, non-linear).

    How can I set the tick points to [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18] without altering the input data?

    I have tried this in the Manual Configuration section:

    { "stepSize": 1 }

    but it doesn’t seem to make any difference.

    I’ve also tried changing the settings in Horizontal Axis Settings > Tick Settings, but they do not seem to affect the chart either.

    Any help would be much appreciated.

    Thanks in advance,
    James

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor contactashish13

    (@rozroz)

    It will be easier for us to reproduce this scenario and offer you a solution if you could share the complete CSV you are trying to upload. Can you please provide that?

    Thread Starter mobilewebexpert

    (@mobilewebexpert)

    Sure. Here is the input file for my Chart.js chart:

    Frequency,Data 1,Data 2
number,number,number
0,78.818216388591,-0.033143033735255
0.018,78.8177145560425,0.037985464562535
17.982,43.4801632630024,36.7758176230439
18,43.444332540587,36.7763082632964

    Thank you.

    Plugin Contributor contactashish13

    (@rozroz)

    When we try with those values, we get the x-axis ticks as 0, 2, 4, 6, 8 …

    Please share a video so that we can understand what you are doing differently.

    Plugin Contributor contactashish13

    (@rozroz)

    We haven’t heard from you in sometime so marking this as Resolved. If you continue to face an issue, please create a new ticket. We’d be happy to help.

    Thread Starter mobilewebexpert

    (@mobilewebexpert)

    Turns out this was a core charts.js issue.

    To achieve a linear x-axis, you have to use a scatter chart and use the showLine attribute.

    As an example, here is my test index.html:

    <!DOCTYPE html>
<html>
    <head>
	<title>Chart.js Test</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    </head>
    <body>
	<div>
	    <h1>Chart.js Test</h1>
	    <canvas id="myChart" height="100" aria-label="Hello ARIA World" role="img">
		<p>Sorry, your browser cannot display this chart.</p>
	    </canvas>
<script>

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Data 1',
            data: [{
                x: 0,
                y: 78.818216388591
            }, {
                x: 0.018,
                y: 78.8177145560425
            }, {
                x: 17.982,
                y: 43.4801632630024
            }, {
                x: 18,
                y: 43.444332540587
            }],
	    showLine: true,
	    pointBackgroundColor: '#fab100',
	    borderColor: '#fab100',
	    backgroundColor: '#00000000'
        }, {
            label: 'Data 2',
            data: [{
                x: 0,
                y: -0.033143033735255
            }, {
                x: 0.018,
                y: 0.037985464562535
            }, {
                x: 17.982,
                y: 36.7758176230439
            }, {
                x: 18,
                y: 36.7763082632964
            }],
	    showLine: true,
	    pointBackgroundColor: '#aab200',
	    borderColor: '#aab200',
	    backgroundColor: '#00000000'
        }]
    },
    options: {
        scales: {
	    xAxes: [{
		scaleLabel: {
		    display: true,
		    labelString: "My x axis",
		    fontColor: "#fab100"
		},
                ticks: {
		    min: 0,
                    max: 18,
		    stepSize: 1,
		    
		    callback: function(value, index, values) {
                        return '' + value;
                    }
		    
                }
            }],
            yAxes: [{
		scaleLabel: {
		    display: true,
		    labelString: "My y axis",
		    fontColor: "#ff0000"
		},
                ticks: {
		    beginAtZero: true,
		    suggestedMin: 0,
		    suggestedMax: 100
                }
            }]
        }
    }
});

</script>
	</div>
    </body>
</html>
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to set x-axis tick values for Charts.js line chart?’ is closed to new replies.