I'm experimenting with amCharts to generate the following:
https://i.sstatic.net/LWAQr.png
Currently, I'm facing some challenges:
- The y-axis labels are not disappearing. I attempted to use theYAxis.disabled = true; as mentioned in the documentation.
- I would like everything below the line graph to be filled with a blue shade. However, it's currently displaying just a line. I tried this approach:
var range = xAxis.axisRanges.create();
range.theXAxis.fill = chart.colors.getIndex(8);
range.theXAxis.fillOpacity = 0.2;What could I be doing wrong?
Check out the Demo:
var chart = am4core.create("dataChart", am4charts.XYChart);
chart.data = [{
"xValue": "Q1",
"yValue": 3
}, {
"xValue": "Q2",
"yValue": 4
}, {
"xValue": "Q3",
"yValue": 7
}, {
"xValue": "Q4",
"yValue": 2
}, {
"xValue": "Q5",
"yValue": 9
}];
/* Create axes */
var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";
// trying to fill area below line
//var range = xAxis.axisRanges.create();
//range.theXAxis.fill = chart.colors.getIndex(8);
//range.theXAxis.fillOpacity = 0.2;
/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
//theYAxis.disabled = true; // . attempting to disable . for displaying 1-10
/* 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";
/* 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>