amCharts 4 - 更改为水平类别颜色
amChart4 - Change Top Horizontal Category Color
我已经阅读了 amchart 的所有文档，任何人都可以指导如何更改顶部水平类别文本颜色的颜色。
const categoryAxis = subscriberChart.xAxes.push(
new am4charts.CategoryAxis()
);
categoryAxis.dataFields.category = 'date';
categoryAxis.renderer.opposite = true;
// Create value axis
const valueAxis = subscriberChart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = true;
//valueAxis.title.text = 'Place taken';
valueAxis.renderer.minLabelPosition = 0.01;
// Configure grid
valueAxis.renderer.grid.template.strokeOpacity = 1;
valueAxis.renderer.grid.template.stroke = am4core.color('#0071a5');
// Configure labels
valueAxis.renderer.labels.template.fill = am4core.color('#03a9f4');
// Create series
const userRegSeries = subscriberChart.series.push(
new am4charts.LineSeries()
);
更改它的方法与更改值轴文本颜色的方法相同 - 通过 categoryAxis 中的 labels 模板 renderer:
categoryAxis.renderer.labels.template.fill = am4core.color('#03a9f4');
initChartData = [
{
date: '02-06-2021',
usersReg: 59,
subscribers: 72,
subPercent: 69,
subRenew: 63,
subCancelled: 45,
pastDue: 83,
monthOn: 77,
},
{
date: '02-07-2021',
usersReg: 30,
subscribers: 66,
subPercent: 24,
subRenew: 61,
subCancelled: 40,
pastDue: 41,
monthOn: 76,
},
{
date: '02-08-2021',
usersReg: 78,
subscribers: 24,
subPercent: 69,
subRenew: 57,
subCancelled: 51,
pastDue: 23,
monthOn: 61,
},
{
date: '02-09-2021',
usersReg: 39,
subscribers: 77,
subPercent: 17,
subRenew: 52,
subCancelled: 53,
pastDue: 64,
monthOn: 82,
},
{
date: '02-10-2021',
usersReg: 29,
subscribers: 23,
subPercent: 49,
subRenew: 26,
subCancelled: 31,
pastDue: 28,
monthOn: 31,
},
{
date: '02-11-2021',
usersReg: 44,
subscribers: 33,
subPercent: 68,
subRenew: 73,
subCancelled: 100,
pastDue: 85,
monthOn: 95,
},
{
date: '02-12-2021',
usersReg: 96,
subscribers: 36,
subPercent: 84,
subRenew: 55,
subCancelled: 48,
pastDue: 62,
monthOn: 57,
},
{
date: '02-13-2021',
usersReg: 62,
subscribers: 61,
subPercent: 40,
subRenew: 91,
subCancelled: 58,
pastDue: 83,
monthOn: 38,
},
{
date: '02-14-2021',
usersReg: 77,
subscribers: 62,
subPercent: 41,
subRenew: 82,
subCancelled: 57,
pastDue: 31,
monthOn: 15,
},
{
date: '02-15-2021',
usersReg: 16,
subscribers: 58,
subPercent: 87,
subRenew: 47,
subCancelled: 83,
pastDue: 42,
monthOn: 13,
},
{
date: '02-16-2021',
usersReg: 97,
subscribers: 96,
subPercent: 88,
subRenew: 36,
subCancelled: 92,
pastDue: 95,
monthOn: 50,
},
{
date: '02-17-2021',
usersReg: 19,
subscribers: 78,
subPercent: 44,
subRenew: 20,
subCancelled: 97,
pastDue: 55,
monthOn: 57,
},
{
date: '02-18-2021',
usersReg: 89,
subscribers: 17,
subPercent: 70,
subRenew: 68,
subCancelled: 55,
pastDue: 35,
monthOn: 48,
},
{
date: '02-19-2021',
usersReg: 58,
subscribers: 98,
subPercent: 26,
subRenew: 34,
subCancelled: 10,
pastDue: 61,
monthOn: 41,
},
{
date: '02-20-2021',
usersReg: 35,
subscribers: 94,
subPercent: 24,
subRenew: 47,
subCancelled: 37,
pastDue: 45,
monthOn: 72,
},
{
date: '02-21-2021',
usersReg: 62,
subscribers: 66,
subPercent: 42,
subRenew: 85,
subCancelled: 12,
pastDue: 10,
monthOn: 69,
},
{
date: '02-22-2021',
usersReg: 38,
subscribers: 91,
subPercent: 56,
subRenew: 80,
subCancelled: 15,
pastDue: 42,
monthOn: 12,
},
{
date: '02-23-2021',
usersReg: 40,
subscribers: 76,
subPercent: 39,
subRenew: 75,
subCancelled: 59,
pastDue: 85,
monthOn: 91,
},
{
date: '02-24-2021',
usersReg: 22,
subscribers: 38,
subPercent: 44,
subRenew: 51,
subCancelled: 86,
pastDue: 31,
monthOn: 65,
},
{
date: '02-25-2021',
usersReg: 43,
subscribers: 80,
subPercent: 97,
subRenew: 52,
subCancelled: 69,
pastDue: 20,
monthOn: 84,
},
{
date: '02-26-2021',
usersReg: 62,
subscribers: 34,
subPercent: 47,
subRenew: 79,
subCancelled: 47,
pastDue: 81,
monthOn: 77,
},
{
date: '02-27-2021',
usersReg: 52,
subscribers: 90,
subPercent: 57,
subRenew: 66,
subCancelled: 44,
pastDue: 23,
monthOn: 75,
},
{
date: '02-28-2021',
usersReg: 16,
subscribers: 61,
subPercent: 22,
subRenew: 63,
subCancelled: 93,
pastDue: 99,
monthOn: 87,
},
{
date: '03-01-2021',
usersReg: 38,
subscribers: 44,
subPercent: 56,
subRenew: 23,
subCancelled: 51,
pastDue: 43,
monthOn: 85,
},
{
date: '03-02-2021',
usersReg: 83,
subscribers: 76,
subPercent: 15,
subRenew: 99,
subCancelled: 93,
pastDue: 18,
monthOn: 53,
},
{
date: '03-03-2021',
usersReg: 96,
subscribers: 33,
subPercent: 15,
subRenew: 45,
subCancelled: 47,
pastDue: 47,
monthOn: 69,
},
{
date: '03-04-2021',
usersReg: 42,
subscribers: 25,
subPercent: 94,
subRenew: 99,
subCancelled: 89,
pastDue: 79,
monthOn: 33,
},
{
date: '03-05-2021',
usersReg: 52,
subscribers: 26,
subPercent: 16,
subRenew: 53,
subCancelled: 52,
pastDue: 50,
monthOn: 49,
},
{
date: '03-06-2021',
usersReg: 94,
subscribers: 25,
subPercent: 16,
subRenew: 65,
subCancelled: 33,
pastDue: 86,
monthOn: 100,
},
{
date: '03-07-2021',
usersReg: 91,
subscribers: 29,
subPercent: 11,
subRenew: 30,
subCancelled: 48,
pastDue: 85,
monthOn: 56,
},
{
date: '03-08-2021',
usersReg: 50,
subscribers: 94,
subPercent: 87,
subRenew: 28,
subCancelled: 48,
pastDue: 75,
monthOn: 34,
},
{
date: '03-09-2021',
usersReg: 30,
subscribers: 90,
subPercent: 66,
subRenew: 78,
subCancelled: 16,
pastDue: 90,
monthOn: 84,
},
{
date: '03-10-2021',
usersReg: 25,
subscribers: 62,
subPercent: 23,
subRenew: 20,
subCancelled: 12,
pastDue: 57,
monthOn: 38,
},
{
date: '03-11-2021',
usersReg: 71,
subscribers: 53,
subPercent: 32,
subRenew: 34,
subCancelled: 81,
pastDue: 54,
monthOn: 41,
},
{
date: '03-12-2021',
usersReg: 31,
subscribers: 20,
subPercent: 31,
subRenew: 82,
subCancelled: 92,
pastDue: 38,
monthOn: 71,
},
{
date: '03-13-2021',
usersReg: 79,
subscribers: 77,
subPercent: 58,
subRenew: 45,
subCancelled: 59,
pastDue: 74,
monthOn: 22,
},
{
date: '03-14-2021',
usersReg: 91,
subscribers: 60,
subPercent: 96,
subRenew: 59,
subCancelled: 40,
pastDue: 74,
monthOn: 23,
},
{
date: '03-15-2021',
usersReg: 100,
subscribers: 92,
subPercent: 21,
subRenew: 22,
subCancelled: 40,
pastDue: 62,
monthOn: 26,
},
{
date: '03-16-2021',
usersReg: 54,
subscribers: 78,
subPercent: 92,
subRenew: 26,
subCancelled: 77,
pastDue: 56,
monthOn: 77,
},
{
date: '03-17-2021',
usersReg: 15,
subscribers: 93,
subPercent: 26,
subRenew: 96,
subCancelled: 31,
pastDue: 13,
monthOn: 48,
},
{
date: '03-18-2021',
usersReg: 49,
subscribers: 41,
subPercent: 96,
subRenew: 35,
subCancelled: 31,
pastDue: 78,
monthOn: 47,
},
{
date: '03-19-2021',
usersReg: 64,
subscribers: 73,
subPercent: 83,
subRenew: 25,
subCancelled: 85,
pastDue: 27,
monthOn: 39,
},
{
date: '03-20-2021',
usersReg: 71,
subscribers: 38,
subPercent: 66,
subRenew: 66,
subCancelled: 89,
pastDue: 98,
monthOn: 37,
},
{
date: '03-21-2021',
usersReg: 100,
subscribers: 16,
subPercent: 71,
subRenew: 73,
subCancelled: 68,
pastDue: 96,
monthOn: 62,
},
{
date: '03-22-2021',
usersReg: 66,
subscribers: 18,
subPercent: 82,
subRenew: 37,
subCancelled: 45,
pastDue: 73,
monthOn: 88,
},
{
date: '03-23-2021',
usersReg: 89,
subscribers: 17,
subPercent: 86,
subRenew: 89,
subCancelled: 68,
pastDue: 95,
monthOn: 90,
},
{
date: '03-24-2021',
usersReg: 74,
subscribers: 24,
subPercent: 77,
subRenew: 89,
subCancelled: 32,
pastDue: 88,
monthOn: 42,
},
{
date: '03-25-2021',
usersReg: 66,
subscribers: 18,
subPercent: 90,
subRenew: 18,
subCancelled: 76,
pastDue: 94,
monthOn: 83,
},
{
date: '03-26-2021',
usersReg: 82,
subscribers: 24,
subPercent: 44,
subRenew: 96,
subCancelled: 37,
pastDue: 50,
monthOn: 57,
},
{
date: '03-27-2021',
usersReg: 62,
subscribers: 72,
subPercent: 77,
subRenew: 51,
subCancelled: 70,
pastDue: 31,
monthOn: 13,
},
{
date: '03-28-2021',
usersReg: 10,
subscribers: 15,
subPercent: 90,
subRenew: 71,
subCancelled: 93,
pastDue: 94,
monthOn: 81,
},
{
date: '03-29-2021',
usersReg: 37,
subscribers: 38,
subPercent: 47,
subRenew: 92,
subCancelled: 30,
pastDue: 66,
monthOn: 29,
},
{
date: '03-30-2021',
usersReg: 74,
subscribers: 27,
subPercent: 88,
subRenew: 77,
subCancelled: 16,
pastDue: 99,
monthOn: 25,
},
{
date: '03-31-2021',
usersReg: 24,
subscribers: 77,
subPercent: 34,
subRenew: 100,
subCancelled: 36,
pastDue: 96,
monthOn: 28,
},
{
date: '04-01-2021',
usersReg: 82,
subscribers: 32,
subPercent: 59,
subRenew: 62,
subCancelled: 77,
pastDue: 79,
monthOn: 71,
},
{
date: '04-02-2021',
usersReg: 55,
subscribers: 97,
subPercent: 69,
subRenew: 45,
subCancelled: 29,
pastDue: 100,
monthOn: 63,
},
{
date: '04-03-2021',
usersReg: 80,
subscribers: 81,
subPercent: 97,
subRenew: 77,
subCancelled: 40,
pastDue: 75,
monthOn: 19,
},
{
date: '04-04-2021',
usersReg: 65,
subscribers: 26,
subPercent: 31,
subRenew: 33,
subCancelled: 42,
pastDue: 66,
monthOn: 16,
},
{
date: '04-05-2021',
usersReg: 74,
subscribers: 73,
subPercent: 56,
subRenew: 97,
subCancelled: 25,
pastDue: 62,
monthOn: 80,
},
{
date: '04-06-2021',
usersReg: 53,
subscribers: 21,
subPercent: 12,
subRenew: 45,
subCancelled: 39,
pastDue: 79,
monthOn: 17,
},
{
date: '04-07-2021',
usersReg: 100,
subscribers: 60,
subPercent: 16,
subRenew: 26,
subCancelled: 20,
pastDue: 28,
monthOn: 11,
},
{
date: '04-08-2021',
usersReg: 40,
subscribers: 76,
subPercent: 76,
subRenew: 33,
subCancelled: 90,
pastDue: 49,
monthOn: 25,
},
{
date: '04-09-2021',
usersReg: 97,
subscribers: 79,
subPercent: 37,
subRenew: 68,
subCancelled: 79,
pastDue: 61,
monthOn: 45,
},
{
date: '04-10-2021',
usersReg: 50,
subscribers: 89,
subPercent: 67,
subRenew: 89,
subCancelled: 87,
pastDue: 33,
monthOn: 54,
},
{
date: '04-11-2021',
usersReg: 45,
subscribers: 65,
subPercent: 80,
subRenew: 68,
subCancelled: 82,
pastDue: 67,
monthOn: 73,
},
{
date: '04-12-2021',
usersReg: 89,
subscribers: 45,
subPercent: 85,
subRenew: 59,
subCancelled: 24,
pastDue: 33,
monthOn: 95,
},
{
date: '04-13-2021',
usersReg: 41,
subscribers: 54,
subPercent: 74,
subRenew: 41,
subCancelled: 22,
pastDue: 82,
monthOn: 17,
},
{
date: '04-14-2021',
usersReg: 15,
subscribers: 39,
subPercent: 76,
subRenew: 16,
subCancelled: 74,
pastDue: 27,
monthOn: 47,
},
{
date: '04-15-2021',
usersReg: 39,
subscribers: 57,
subPercent: 90,
subRenew: 90,
subCancelled: 49,
pastDue: 58,
monthOn: 73,
},
{
date: '04-16-2021',
usersReg: 32,
subscribers: 32,
subPercent: 61,
subRenew: 26,
subCancelled: 73,
pastDue: 23,
monthOn: 11,
},
{
date: '04-17-2021',
usersReg: 23,
subscribers: 47,
subPercent: 92,
subRenew: 33,
subCancelled: 76,
pastDue: 84,
monthOn: 98,
},
{
date: '04-18-2021',
usersReg: 72,
subscribers: 89,
subPercent: 10,
subRenew: 90,
subCancelled: 82,
pastDue: 95,
monthOn: 60,
},
{
date: '04-19-2021',
usersReg: 71,
subscribers: 27,
subPercent: 78,
subRenew: 46,
subCancelled: 75,
pastDue: 68,
monthOn: 85,
},
{
date: '04-20-2021',
usersReg: 59,
subscribers: 44,
subPercent: 47,
subRenew: 20,
subCancelled: 29,
pastDue: 26,
monthOn: 70,
},
{
date: '04-21-2021',
usersReg: 79,
subscribers: 79,
subPercent: 70,
subRenew: 73,
subCancelled: 41,
pastDue: 66,
monthOn: 73,
},
{
date: '04-22-2021',
usersReg: 42,
subscribers: 23,
subPercent: 78,
subRenew: 20,
subCancelled: 24,
pastDue: 22,
monthOn: 25,
},
{
date: '04-23-2021',
usersReg: 34,
subscribers: 73,
subPercent: 11,
subRenew: 59,
subCancelled: 58,
pastDue: 22,
monthOn: 50,
},
{
date: '04-24-2021',
usersReg: 50,
subscribers: 39,
subPercent: 25,
subRenew: 33,
subCancelled: 82,
pastDue: 22,
monthOn: 52,
},
{
date: '04-25-2021',
usersReg: 27,
subscribers: 53,
subPercent: 76,
subRenew: 67,
subCancelled: 45,
pastDue: 40,
monthOn: 10,
},
{
date: '04-26-2021',
usersReg: 96,
subscribers: 58,
subPercent: 71,
subRenew: 32,
subCancelled: 51,
pastDue: 98,
monthOn: 37,
},
{
date: '04-27-2021',
usersReg: 10,
subscribers: 31,
subPercent: 79,
subRenew: 62,
subCancelled: 25,
pastDue: 43,
monthOn: 80,
},
{
date: '04-28-2021',
usersReg: 86,
subscribers: 26,
subPercent: 25,
subRenew: 76,
subCancelled: 18,
pastDue: 67,
monthOn: 16,
},
{
date: '04-29-2021',
usersReg: 58,
subscribers: 14,
subPercent: 100,
subRenew: 56,
subCancelled: 84,
pastDue: 75,
monthOn: 47,
},
{
date: '04-30-2021',
usersReg: 95,
subscribers: 65,
subPercent: 88,
subRenew: 61,
subCancelled: 84,
pastDue: 37,
monthOn: 47,
},
{
date: '05-01-2021',
usersReg: 99,
subscribers: 24,
subPercent: 77,
subRenew: 74,
subCancelled: 37,
pastDue: 55,
monthOn: 43,
},
{
date: '05-02-2021',
usersReg: 85,
subscribers: 89,
subPercent: 17,
subRenew: 41,
subCancelled: 67,
pastDue: 47,
monthOn: 54,
},
{
date: '05-03-2021',
usersReg: 36,
subscribers: 89,
subPercent: 34,
subRenew: 30,
subCancelled: 78,
pastDue: 68,
monthOn: 22,
},
{
date: '05-04-2021',
usersReg: 67,
subscribers: 68,
subPercent: 46,
subRenew: 59,
subCancelled: 50,
pastDue: 74,
monthOn: 76,
},
{
date: '05-05-2021',
usersReg: 18,
subscribers: 31,
subPercent: 13,
subRenew: 81,
subCancelled: 30,
pastDue: 54,
monthOn: 74,
},
{
date: '05-06-2021',
usersReg: 17,
subscribers: 91,
subPercent: 49,
subRenew: 84,
subCancelled: 94,
pastDue: 68,
monthOn: 57,
},
];
const subscriberChart = am4core.create(
'subscription-chart',
am4charts.XYChart
);
subscriberChart.data = this.initChartData;
const categoryAxis = subscriberChart.xAxes.push(
new am4charts.CategoryAxis()
);
categoryAxis.dataFields.category = 'date';
categoryAxis.renderer.opposite = true;
categoryAxis.renderer.labels.template.fill = am4core.color('#03a9f4');
// Create value axis
const valueAxis = subscriberChart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = true;
//valueAxis.title.text = 'Place taken';
valueAxis.renderer.minLabelPosition = 0.01;
// Configure grid
valueAxis.renderer.grid.template.strokeOpacity = 1;
valueAxis.renderer.grid.template.stroke = am4core.color('#0071a5');
// Configure labels
valueAxis.renderer.labels.template.fill = am4core.color('#03a9f4');
// Create series
const userRegSeries = subscriberChart.series.push(
new am4charts.LineSeries()
);
const userRegSeriesBulletsColors = '#ffc107';
userRegSeries.dataFields.valueY = 'usersReg';
userRegSeries.dataFields.categoryX = 'date';
userRegSeries.name = 'Registered Users';
userRegSeries.bullets.push(new am4charts.CircleBullet());
userRegSeries.tooltipText = '{valueY} {name} in {categoryX}';
userRegSeries.legendSettings.valueText = '{valueY}';
userRegSeries.stroke = am4core.color(userRegSeriesBulletsColors);
const subscribersSeries = subscriberChart.series.push(
new am4charts.LineSeries()
);
const subscribersSeriesBulletsColors = '#00b301';
subscribersSeries.dataFields.valueY = 'subscribers';
subscribersSeries.dataFields.categoryX = 'date';
subscribersSeries.name = 'Subscribers';
subscribersSeries.bullets.push(new am4charts.CircleBullet());
subscribersSeries.tooltipText = '{valueY} {name} in {categoryX}';
subscribersSeries.legendSettings.valueText = '{valueY}';
subscribersSeries.stroke = am4core.color(subscribersSeriesBulletsColors);
const subPercentSeries = subscriberChart.series.push(
new am4charts.LineSeries()
);
const subPercentSeriesBulletsColors = '#00bcd4';
subPercentSeries.dataFields.valueY = 'subPercent';
subPercentSeries.dataFields.categoryX = 'date';
subPercentSeries.name = 'Subscriber Percentage';
subPercentSeries.bullets.push(new am4charts.CircleBullet());
subPercentSeries.tooltipText = '{valueY} {name} in {categoryX}';
subPercentSeries.legendSettings.valueText = '{valueY}';
subPercentSeries.stroke = am4core.color(subPercentSeriesBulletsColors);
// Add chart cursor
subscriberChart.cursor = new am4charts.XYCursor();
subscriberChart.cursor.behavior = 'zoomY';
let hs1 = userRegSeries.segments.template.states.create('hover');
hs1.properties.strokeWidth = 5;
userRegSeries.segments.template.strokeWidth = 1;
userRegSeries.properties.fill = am4core.color(userRegSeriesBulletsColors);
let hs2 = subscribersSeries.segments.template.states.create('hover');
hs2.properties.strokeWidth = 5;
subscribersSeries.segments.template.strokeWidth = 1;
subscribersSeries.properties.fill = am4core.color(
subscribersSeriesBulletsColors
);
let hs3 = subPercentSeries.segments.template.states.create('hover');
hs3.properties.strokeWidth = 5;
subPercentSeries.segments.template.strokeWidth = 1;
subPercentSeries.properties.fill = am4core.color(
subPercentSeriesBulletsColors
);
// Add legend
subscriberChart.legend = new am4charts.Legend();
subscriberChart.legend.labels.template.fill = am4core.color('#252525');
subscriberChart.legend.valueLabels.template.fill = am4core.color('#252525');
#subscription-chart{
height:350px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="subscription-chart" class="subscription-chart"></div>
我已经阅读了 amchart 的所有文档，任何人都可以指导如何更改顶部水平类别文本颜色的颜色。
const categoryAxis = subscriberChart.xAxes.push(
new am4charts.CategoryAxis()
);
categoryAxis.dataFields.category = 'date';
categoryAxis.renderer.opposite = true;
// Create value axis
const valueAxis = subscriberChart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = true;
//valueAxis.title.text = 'Place taken';
valueAxis.renderer.minLabelPosition = 0.01;
// Configure grid
valueAxis.renderer.grid.template.strokeOpacity = 1;
valueAxis.renderer.grid.template.stroke = am4core.color('#0071a5');
// Configure labels
valueAxis.renderer.labels.template.fill = am4core.color('#03a9f4');
// Create series
const userRegSeries = subscriberChart.series.push(
new am4charts.LineSeries()
);
更改它的方法与更改值轴文本颜色的方法相同 - 通过 categoryAxis 中的 labels 模板 renderer:
categoryAxis.renderer.labels.template.fill = am4core.color('#03a9f4');
initChartData = [
{
date: '02-06-2021',
usersReg: 59,
subscribers: 72,
subPercent: 69,
subRenew: 63,
subCancelled: 45,
pastDue: 83,
monthOn: 77,
},
{
date: '02-07-2021',
usersReg: 30,
subscribers: 66,
subPercent: 24,
subRenew: 61,
subCancelled: 40,
pastDue: 41,
monthOn: 76,
},
{
date: '02-08-2021',
usersReg: 78,
subscribers: 24,
subPercent: 69,
subRenew: 57,
subCancelled: 51,
pastDue: 23,
monthOn: 61,
},
{
date: '02-09-2021',
usersReg: 39,
subscribers: 77,
subPercent: 17,
subRenew: 52,
subCancelled: 53,
pastDue: 64,
monthOn: 82,
},
{
date: '02-10-2021',
usersReg: 29,
subscribers: 23,
subPercent: 49,
subRenew: 26,
subCancelled: 31,
pastDue: 28,
monthOn: 31,
},
{
date: '02-11-2021',
usersReg: 44,
subscribers: 33,
subPercent: 68,
subRenew: 73,
subCancelled: 100,
pastDue: 85,
monthOn: 95,
},
{
date: '02-12-2021',
usersReg: 96,
subscribers: 36,
subPercent: 84,
subRenew: 55,
subCancelled: 48,
pastDue: 62,
monthOn: 57,
},
{
date: '02-13-2021',
usersReg: 62,
subscribers: 61,
subPercent: 40,
subRenew: 91,
subCancelled: 58,
pastDue: 83,
monthOn: 38,
},
{
date: '02-14-2021',
usersReg: 77,
subscribers: 62,
subPercent: 41,
subRenew: 82,
subCancelled: 57,
pastDue: 31,
monthOn: 15,
},
{
date: '02-15-2021',
usersReg: 16,
subscribers: 58,
subPercent: 87,
subRenew: 47,
subCancelled: 83,
pastDue: 42,
monthOn: 13,
},
{
date: '02-16-2021',
usersReg: 97,
subscribers: 96,
subPercent: 88,
subRenew: 36,
subCancelled: 92,
pastDue: 95,
monthOn: 50,
},
{
date: '02-17-2021',
usersReg: 19,
subscribers: 78,
subPercent: 44,
subRenew: 20,
subCancelled: 97,
pastDue: 55,
monthOn: 57,
},
{
date: '02-18-2021',
usersReg: 89,
subscribers: 17,
subPercent: 70,
subRenew: 68,
subCancelled: 55,
pastDue: 35,
monthOn: 48,
},
{
date: '02-19-2021',
usersReg: 58,
subscribers: 98,
subPercent: 26,
subRenew: 34,
subCancelled: 10,
pastDue: 61,
monthOn: 41,
},
{
date: '02-20-2021',
usersReg: 35,
subscribers: 94,
subPercent: 24,
subRenew: 47,
subCancelled: 37,
pastDue: 45,
monthOn: 72,
},
{
date: '02-21-2021',
usersReg: 62,
subscribers: 66,
subPercent: 42,
subRenew: 85,
subCancelled: 12,
pastDue: 10,
monthOn: 69,
},
{
date: '02-22-2021',
usersReg: 38,
subscribers: 91,
subPercent: 56,
subRenew: 80,
subCancelled: 15,
pastDue: 42,
monthOn: 12,
},
{
date: '02-23-2021',
usersReg: 40,
subscribers: 76,
subPercent: 39,
subRenew: 75,
subCancelled: 59,
pastDue: 85,
monthOn: 91,
},
{
date: '02-24-2021',
usersReg: 22,
subscribers: 38,
subPercent: 44,
subRenew: 51,
subCancelled: 86,
pastDue: 31,
monthOn: 65,
},
{
date: '02-25-2021',
usersReg: 43,
subscribers: 80,
subPercent: 97,
subRenew: 52,
subCancelled: 69,
pastDue: 20,
monthOn: 84,
},
{
date: '02-26-2021',
usersReg: 62,
subscribers: 34,
subPercent: 47,
subRenew: 79,
subCancelled: 47,
pastDue: 81,
monthOn: 77,
},
{
date: '02-27-2021',
usersReg: 52,
subscribers: 90,
subPercent: 57,
subRenew: 66,
subCancelled: 44,
pastDue: 23,
monthOn: 75,
},
{
date: '02-28-2021',
usersReg: 16,
subscribers: 61,
subPercent: 22,
subRenew: 63,
subCancelled: 93,
pastDue: 99,
monthOn: 87,
},
{
date: '03-01-2021',
usersReg: 38,
subscribers: 44,
subPercent: 56,
subRenew: 23,
subCancelled: 51,
pastDue: 43,
monthOn: 85,
},
{
date: '03-02-2021',
usersReg: 83,
subscribers: 76,
subPercent: 15,
subRenew: 99,
subCancelled: 93,
pastDue: 18,
monthOn: 53,
},
{
date: '03-03-2021',
usersReg: 96,
subscribers: 33,
subPercent: 15,
subRenew: 45,
subCancelled: 47,
pastDue: 47,
monthOn: 69,
},
{
date: '03-04-2021',
usersReg: 42,
subscribers: 25,
subPercent: 94,
subRenew: 99,
subCancelled: 89,
pastDue: 79,
monthOn: 33,
},
{
date: '03-05-2021',
usersReg: 52,
subscribers: 26,
subPercent: 16,
subRenew: 53,
subCancelled: 52,
pastDue: 50,
monthOn: 49,
},
{
date: '03-06-2021',
usersReg: 94,
subscribers: 25,
subPercent: 16,
subRenew: 65,
subCancelled: 33,
pastDue: 86,
monthOn: 100,
},
{
date: '03-07-2021',
usersReg: 91,
subscribers: 29,
subPercent: 11,
subRenew: 30,
subCancelled: 48,
pastDue: 85,
monthOn: 56,
},
{
date: '03-08-2021',
usersReg: 50,
subscribers: 94,
subPercent: 87,
subRenew: 28,
subCancelled: 48,
pastDue: 75,
monthOn: 34,
},
{
date: '03-09-2021',
usersReg: 30,
subscribers: 90,
subPercent: 66,
subRenew: 78,
subCancelled: 16,
pastDue: 90,
monthOn: 84,
},
{
date: '03-10-2021',
usersReg: 25,
subscribers: 62,
subPercent: 23,
subRenew: 20,
subCancelled: 12,
pastDue: 57,
monthOn: 38,
},
{
date: '03-11-2021',
usersReg: 71,
subscribers: 53,
subPercent: 32,
subRenew: 34,
subCancelled: 81,
pastDue: 54,
monthOn: 41,
},
{
date: '03-12-2021',
usersReg: 31,
subscribers: 20,
subPercent: 31,
subRenew: 82,
subCancelled: 92,
pastDue: 38,
monthOn: 71,
},
{
date: '03-13-2021',
usersReg: 79,
subscribers: 77,
subPercent: 58,
subRenew: 45,
subCancelled: 59,
pastDue: 74,
monthOn: 22,
},
{
date: '03-14-2021',
usersReg: 91,
subscribers: 60,
subPercent: 96,
subRenew: 59,
subCancelled: 40,
pastDue: 74,
monthOn: 23,
},
{
date: '03-15-2021',
usersReg: 100,
subscribers: 92,
subPercent: 21,
subRenew: 22,
subCancelled: 40,
pastDue: 62,
monthOn: 26,
},
{
date: '03-16-2021',
usersReg: 54,
subscribers: 78,
subPercent: 92,
subRenew: 26,
subCancelled: 77,
pastDue: 56,
monthOn: 77,
},
{
date: '03-17-2021',
usersReg: 15,
subscribers: 93,
subPercent: 26,
subRenew: 96,
subCancelled: 31,
pastDue: 13,
monthOn: 48,
},
{
date: '03-18-2021',
usersReg: 49,
subscribers: 41,
subPercent: 96,
subRenew: 35,
subCancelled: 31,
pastDue: 78,
monthOn: 47,
},
{
date: '03-19-2021',
usersReg: 64,
subscribers: 73,
subPercent: 83,
subRenew: 25,
subCancelled: 85,
pastDue: 27,
monthOn: 39,
},
{
date: '03-20-2021',
usersReg: 71,
subscribers: 38,
subPercent: 66,
subRenew: 66,
subCancelled: 89,
pastDue: 98,
monthOn: 37,
},
{
date: '03-21-2021',
usersReg: 100,
subscribers: 16,
subPercent: 71,
subRenew: 73,
subCancelled: 68,
pastDue: 96,
monthOn: 62,
},
{
date: '03-22-2021',
usersReg: 66,
subscribers: 18,
subPercent: 82,
subRenew: 37,
subCancelled: 45,
pastDue: 73,
monthOn: 88,
},
{
date: '03-23-2021',
usersReg: 89,
subscribers: 17,
subPercent: 86,
subRenew: 89,
subCancelled: 68,
pastDue: 95,
monthOn: 90,
},
{
date: '03-24-2021',
usersReg: 74,
subscribers: 24,
subPercent: 77,
subRenew: 89,
subCancelled: 32,
pastDue: 88,
monthOn: 42,
},
{
date: '03-25-2021',
usersReg: 66,
subscribers: 18,
subPercent: 90,
subRenew: 18,
subCancelled: 76,
pastDue: 94,
monthOn: 83,
},
{
date: '03-26-2021',
usersReg: 82,
subscribers: 24,
subPercent: 44,
subRenew: 96,
subCancelled: 37,
pastDue: 50,
monthOn: 57,
},
{
date: '03-27-2021',
usersReg: 62,
subscribers: 72,
subPercent: 77,
subRenew: 51,
subCancelled: 70,
pastDue: 31,
monthOn: 13,
},
{
date: '03-28-2021',
usersReg: 10,
subscribers: 15,
subPercent: 90,
subRenew: 71,
subCancelled: 93,
pastDue: 94,
monthOn: 81,
},
{
date: '03-29-2021',
usersReg: 37,
subscribers: 38,
subPercent: 47,
subRenew: 92,
subCancelled: 30,
pastDue: 66,
monthOn: 29,
},
{
date: '03-30-2021',
usersReg: 74,
subscribers: 27,
subPercent: 88,
subRenew: 77,
subCancelled: 16,
pastDue: 99,
monthOn: 25,
},
{
date: '03-31-2021',
usersReg: 24,
subscribers: 77,
subPercent: 34,
subRenew: 100,
subCancelled: 36,
pastDue: 96,
monthOn: 28,
},
{
date: '04-01-2021',
usersReg: 82,
subscribers: 32,
subPercent: 59,
subRenew: 62,
subCancelled: 77,
pastDue: 79,
monthOn: 71,
},
{
date: '04-02-2021',
usersReg: 55,
subscribers: 97,
subPercent: 69,
subRenew: 45,
subCancelled: 29,
pastDue: 100,
monthOn: 63,
},
{
date: '04-03-2021',
usersReg: 80,
subscribers: 81,
subPercent: 97,
subRenew: 77,
subCancelled: 40,
pastDue: 75,
monthOn: 19,
},
{
date: '04-04-2021',
usersReg: 65,
subscribers: 26,
subPercent: 31,
subRenew: 33,
subCancelled: 42,
pastDue: 66,
monthOn: 16,
},
{
date: '04-05-2021',
usersReg: 74,
subscribers: 73,
subPercent: 56,
subRenew: 97,
subCancelled: 25,
pastDue: 62,
monthOn: 80,
},
{
date: '04-06-2021',
usersReg: 53,
subscribers: 21,
subPercent: 12,
subRenew: 45,
subCancelled: 39,
pastDue: 79,
monthOn: 17,
},
{
date: '04-07-2021',
usersReg: 100,
subscribers: 60,
subPercent: 16,
subRenew: 26,
subCancelled: 20,
pastDue: 28,
monthOn: 11,
},
{
date: '04-08-2021',
usersReg: 40,
subscribers: 76,
subPercent: 76,
subRenew: 33,
subCancelled: 90,
pastDue: 49,
monthOn: 25,
},
{
date: '04-09-2021',
usersReg: 97,
subscribers: 79,
subPercent: 37,
subRenew: 68,
subCancelled: 79,
pastDue: 61,
monthOn: 45,
},
{
date: '04-10-2021',
usersReg: 50,
subscribers: 89,
subPercent: 67,
subRenew: 89,
subCancelled: 87,
pastDue: 33,
monthOn: 54,
},
{
date: '04-11-2021',
usersReg: 45,
subscribers: 65,
subPercent: 80,
subRenew: 68,
subCancelled: 82,
pastDue: 67,
monthOn: 73,
},
{
date: '04-12-2021',
usersReg: 89,
subscribers: 45,
subPercent: 85,
subRenew: 59,
subCancelled: 24,
pastDue: 33,
monthOn: 95,
},
{
date: '04-13-2021',
usersReg: 41,
subscribers: 54,
subPercent: 74,
subRenew: 41,
subCancelled: 22,
pastDue: 82,
monthOn: 17,
},
{
date: '04-14-2021',
usersReg: 15,
subscribers: 39,
subPercent: 76,
subRenew: 16,
subCancelled: 74,
pastDue: 27,
monthOn: 47,
},
{
date: '04-15-2021',
usersReg: 39,
subscribers: 57,
subPercent: 90,
subRenew: 90,
subCancelled: 49,
pastDue: 58,
monthOn: 73,
},
{
date: '04-16-2021',
usersReg: 32,
subscribers: 32,
subPercent: 61,
subRenew: 26,
subCancelled: 73,
pastDue: 23,
monthOn: 11,
},
{
date: '04-17-2021',
usersReg: 23,
subscribers: 47,
subPercent: 92,
subRenew: 33,
subCancelled: 76,
pastDue: 84,
monthOn: 98,
},
{
date: '04-18-2021',
usersReg: 72,
subscribers: 89,
subPercent: 10,
subRenew: 90,
subCancelled: 82,
pastDue: 95,
monthOn: 60,
},
{
date: '04-19-2021',
usersReg: 71,
subscribers: 27,
subPercent: 78,
subRenew: 46,
subCancelled: 75,
pastDue: 68,
monthOn: 85,
},
{
date: '04-20-2021',
usersReg: 59,
subscribers: 44,
subPercent: 47,
subRenew: 20,
subCancelled: 29,
pastDue: 26,
monthOn: 70,
},
{
date: '04-21-2021',
usersReg: 79,
subscribers: 79,
subPercent: 70,
subRenew: 73,
subCancelled: 41,
pastDue: 66,
monthOn: 73,
},
{
date: '04-22-2021',
usersReg: 42,
subscribers: 23,
subPercent: 78,
subRenew: 20,
subCancelled: 24,
pastDue: 22,
monthOn: 25,
},
{
date: '04-23-2021',
usersReg: 34,
subscribers: 73,
subPercent: 11,
subRenew: 59,
subCancelled: 58,
pastDue: 22,
monthOn: 50,
},
{
date: '04-24-2021',
usersReg: 50,
subscribers: 39,
subPercent: 25,
subRenew: 33,
subCancelled: 82,
pastDue: 22,
monthOn: 52,
},
{
date: '04-25-2021',
usersReg: 27,
subscribers: 53,
subPercent: 76,
subRenew: 67,
subCancelled: 45,
pastDue: 40,
monthOn: 10,
},
{
date: '04-26-2021',
usersReg: 96,
subscribers: 58,
subPercent: 71,
subRenew: 32,
subCancelled: 51,
pastDue: 98,
monthOn: 37,
},
{
date: '04-27-2021',
usersReg: 10,
subscribers: 31,
subPercent: 79,
subRenew: 62,
subCancelled: 25,
pastDue: 43,
monthOn: 80,
},
{
date: '04-28-2021',
usersReg: 86,
subscribers: 26,
subPercent: 25,
subRenew: 76,
subCancelled: 18,
pastDue: 67,
monthOn: 16,
},
{
date: '04-29-2021',
usersReg: 58,
subscribers: 14,
subPercent: 100,
subRenew: 56,
subCancelled: 84,
pastDue: 75,
monthOn: 47,
},
{
date: '04-30-2021',
usersReg: 95,
subscribers: 65,
subPercent: 88,
subRenew: 61,
subCancelled: 84,
pastDue: 37,
monthOn: 47,
},
{
date: '05-01-2021',
usersReg: 99,
subscribers: 24,
subPercent: 77,
subRenew: 74,
subCancelled: 37,
pastDue: 55,
monthOn: 43,
},
{
date: '05-02-2021',
usersReg: 85,
subscribers: 89,
subPercent: 17,
subRenew: 41,
subCancelled: 67,
pastDue: 47,
monthOn: 54,
},
{
date: '05-03-2021',
usersReg: 36,
subscribers: 89,
subPercent: 34,
subRenew: 30,
subCancelled: 78,
pastDue: 68,
monthOn: 22,
},
{
date: '05-04-2021',
usersReg: 67,
subscribers: 68,
subPercent: 46,
subRenew: 59,
subCancelled: 50,
pastDue: 74,
monthOn: 76,
},
{
date: '05-05-2021',
usersReg: 18,
subscribers: 31,
subPercent: 13,
subRenew: 81,
subCancelled: 30,
pastDue: 54,
monthOn: 74,
},
{
date: '05-06-2021',
usersReg: 17,
subscribers: 91,
subPercent: 49,
subRenew: 84,
subCancelled: 94,
pastDue: 68,
monthOn: 57,
},
];
const subscriberChart = am4core.create(
'subscription-chart',
am4charts.XYChart
);
subscriberChart.data = this.initChartData;
const categoryAxis = subscriberChart.xAxes.push(
new am4charts.CategoryAxis()
);
categoryAxis.dataFields.category = 'date';
categoryAxis.renderer.opposite = true;
categoryAxis.renderer.labels.template.fill = am4core.color('#03a9f4');
// Create value axis
const valueAxis = subscriberChart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = true;
//valueAxis.title.text = 'Place taken';
valueAxis.renderer.minLabelPosition = 0.01;
// Configure grid
valueAxis.renderer.grid.template.strokeOpacity = 1;
valueAxis.renderer.grid.template.stroke = am4core.color('#0071a5');
// Configure labels
valueAxis.renderer.labels.template.fill = am4core.color('#03a9f4');
// Create series
const userRegSeries = subscriberChart.series.push(
new am4charts.LineSeries()
);
const userRegSeriesBulletsColors = '#ffc107';
userRegSeries.dataFields.valueY = 'usersReg';
userRegSeries.dataFields.categoryX = 'date';
userRegSeries.name = 'Registered Users';
userRegSeries.bullets.push(new am4charts.CircleBullet());
userRegSeries.tooltipText = '{valueY} {name} in {categoryX}';
userRegSeries.legendSettings.valueText = '{valueY}';
userRegSeries.stroke = am4core.color(userRegSeriesBulletsColors);
const subscribersSeries = subscriberChart.series.push(
new am4charts.LineSeries()
);
const subscribersSeriesBulletsColors = '#00b301';
subscribersSeries.dataFields.valueY = 'subscribers';
subscribersSeries.dataFields.categoryX = 'date';
subscribersSeries.name = 'Subscribers';
subscribersSeries.bullets.push(new am4charts.CircleBullet());
subscribersSeries.tooltipText = '{valueY} {name} in {categoryX}';
subscribersSeries.legendSettings.valueText = '{valueY}';
subscribersSeries.stroke = am4core.color(subscribersSeriesBulletsColors);
const subPercentSeries = subscriberChart.series.push(
new am4charts.LineSeries()
);
const subPercentSeriesBulletsColors = '#00bcd4';
subPercentSeries.dataFields.valueY = 'subPercent';
subPercentSeries.dataFields.categoryX = 'date';
subPercentSeries.name = 'Subscriber Percentage';
subPercentSeries.bullets.push(new am4charts.CircleBullet());
subPercentSeries.tooltipText = '{valueY} {name} in {categoryX}';
subPercentSeries.legendSettings.valueText = '{valueY}';
subPercentSeries.stroke = am4core.color(subPercentSeriesBulletsColors);
// Add chart cursor
subscriberChart.cursor = new am4charts.XYCursor();
subscriberChart.cursor.behavior = 'zoomY';
let hs1 = userRegSeries.segments.template.states.create('hover');
hs1.properties.strokeWidth = 5;
userRegSeries.segments.template.strokeWidth = 1;
userRegSeries.properties.fill = am4core.color(userRegSeriesBulletsColors);
let hs2 = subscribersSeries.segments.template.states.create('hover');
hs2.properties.strokeWidth = 5;
subscribersSeries.segments.template.strokeWidth = 1;
subscribersSeries.properties.fill = am4core.color(
subscribersSeriesBulletsColors
);
let hs3 = subPercentSeries.segments.template.states.create('hover');
hs3.properties.strokeWidth = 5;
subPercentSeries.segments.template.strokeWidth = 1;
subPercentSeries.properties.fill = am4core.color(
subPercentSeriesBulletsColors
);
// Add legend
subscriberChart.legend = new am4charts.Legend();
subscriberChart.legend.labels.template.fill = am4core.color('#252525');
subscriberChart.legend.valueLabels.template.fill = am4core.color('#252525');
#subscription-chart{
height:350px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="subscription-chart" class="subscription-chart"></div>