It seems like even number counted labels (2, 4 etc) are being hidden in my chart.
Unsure why as I haven't specifically set the hide these anywhere in the code.
Demo :
var chart = am4core.create("dataChart", am4charts.XYChart); chart.data = [{ "xValue": "Q1", "yValue": 6 }, { "xValue": "Q2", "yValue": 7 }, { "xValue": "Q3", "yValue": 3 }, { "xValue": "Q4", "yValue": 2 }, { "xValue": "Q5", "yValue": 9 }]; /* Create axes */ var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis()); theXAxis.dataFields.category = "xValue"; /* Create value axis */ var theYAxis = chart.yAxes.push(new am4charts.ValueAxis()); theYAxis.renderer.labels.template.disabled = true; /* Create series */ var series1 = chart.series.push(new am4charts.LineSeries()); series1.dataFields.valueY = "yValue"; series1.dataFields.categoryX = "xValue"; series1.bullets.push(new am4charts.CircleBullet()); series1.tooltipText = "{valueY} / 10"; series1.fill = "#2c3e96"; series1.fillOpacity = .3; series1.stroke = "#4967fa"; /* Create a cursor */ chart.cursor = new am4charts.XYCursor();
#dataChart{ width: 100%; height: 500px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/charts.js"></script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> <div id="dataChart"></div>
Edit:
I can see in the demo above, it works (Q2 and Q4 labels are hidden for me everywhere else).
This fiddle here however, showcases what I'm experiencing.
What I'm seeing:
The label density is controlled by the minGridDistance
property in the axis renderer, as mentioned in the documentation . You'll want to set this to a smaller value if you want to show more labels.
theXAxis.renderer.minGridDistance = 30; //adjust as needed
Demo below:
var chart = am4core.create("dataChart", am4charts.XYChart); chart.data = [{ "xValue": "Q1", "yValue": 6 }, { "xValue": "Q2", "yValue": 7 }, { "xValue": "Q3", "yValue": 3 }, { "xValue": "Q4", "yValue": 2 }, { "xValue": "Q5", "yValue": 9 }]; /* Create axes */ var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis()); theXAxis.dataFields.category = "xValue"; theXAxis.renderer.minGridDistance = 30; /* Create value axis */ var theYAxis = chart.yAxes.push(new am4charts.ValueAxis()); theYAxis.renderer.labels.template.disabled = true; /* Create series */ var series1 = chart.series.push(new am4charts.LineSeries()); series1.dataFields.valueY = "yValue"; series1.dataFields.categoryX = "xValue"; series1.bullets.push(new am4charts.CircleBullet()); series1.tooltipText = "{valueY} / 10"; series1.fill = "#2c3e96"; series1.fillOpacity = .3; series1.stroke = "#4967fa"; /* Create a cursor */ chart.cursor = new am4charts.XYCursor();
#dataChart { width: 300px; height: 500px; }
<script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/charts.js"></script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> <div id="dataChart"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.