javascript - Chartjs only displaying first and last x-axis labels - Stack Overflow

admin管理员组

文章数量:1302193

I have a dataset which has around 60 x-axis labels. My line chart is not displaying all the labels in my x-axis.

        var ctx = this.refs.basicXYChart;
        var config = {
            type: 'line',
            data: {
                xLabels: Object.keys(result),
                yLabels: Object.values(result),
                datasets: [{
                    label: this.state.report.definition.name,
                    data: Object.values(result),
                    backgroundColor: 'rgba(154, 208, 245, 0.5)',
                    borderWidth: 1,
                    pointStyle: 'circle',
                    pointBackgroundColor: 'rgb(77, 172, 237)',
                    pointRadius: 5,
                    pointHoverRadius: 10,
                    borderWidth: 1,
                    borderColor: '#000000'

                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: this.props.X_label
                        }
                    }],
                    yAxes: [{
                        position: 'left',
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: this.props.Y_label
                        }
                    }]
                }
            }
        };

        if(y_type == 'category'){
            config.options.scales.yAxes[0]['type'] = 'category';
        }
        var myChart = new Chart(ctx, config);

I also want to start the y-axis from 0

I have a dataset which has around 60 x-axis labels. My line chart is not displaying all the labels in my x-axis.

        var ctx = this.refs.basicXYChart;
        var config = {
            type: 'line',
            data: {
                xLabels: Object.keys(result),
                yLabels: Object.values(result),
                datasets: [{
                    label: this.state.report.definition.name,
                    data: Object.values(result),
                    backgroundColor: 'rgba(154, 208, 245, 0.5)',
                    borderWidth: 1,
                    pointStyle: 'circle',
                    pointBackgroundColor: 'rgb(77, 172, 237)',
                    pointRadius: 5,
                    pointHoverRadius: 10,
                    borderWidth: 1,
                    borderColor: '#000000'

                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: this.props.X_label
                        }
                    }],
                    yAxes: [{
                        position: 'left',
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: this.props.Y_label
                        }
                    }]
                }
            }
        };

        if(y_type == 'category'){
            config.options.scales.yAxes[0]['type'] = 'category';
        }
        var myChart = new Chart(ctx, config);

I also want to start the y-axis from 0

• javascript
• charts

Share Follow asked Aug 6, 2017 at 6:16 Jude NiroshanJude Niroshan 4,46099 gold badges4242 silver badges6767 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is addressed in https://github./chartjs/Chart.js/issues/2801.

scales: {
    xAxes: [{
        ticks: {
            autoSkip: false
        }
    }]
}

Which can be found in the documentation here: http://www.chartjs/docs/latest/axes/cartesian/#tick-configuration

The answer does appear to be different now:

options: {
    scales: {
      x: {
        ticks: {
          autoSkip: false
        }
      }
    }
 }

本文标签： javascriptChartjs only displaying first and last xaxis labelsStack Overflow