Custom css for Amcharts

Question

I'm using Amcharts 4 and Angular 7. Could not find any resources to use a custom css for the tooltip. Explored amchart site and the questions here in Stackoverflow but no similar question. Anyone who knows about this? Would appreciate any help. I could use inlign styling but code would be cleaner with external css.

Answer 1

First step for doing this is the next:

If you need complex information in your tooltip - tables, images, CSS you might consider tooltipHTML . It accepts any valid HTML, including full-fledged CSS, so you can do anything in there.

 /** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */ // Themes begin am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("chartdiv", am4charts.XYChart); var data = []; var value = 120; var names = ["Raina", "Demarcus", "Carlo", "Jacinda", "Richie", "Antony", "Amada", "Idalia", "Janella", "Marla", "Curtis", "Shellie", "Meggan", "Nathanael", "Jannette", "Tyrell", "Sheena", "Maranda", "Briana", "Rosa", "Rosanne", "Herman", "Wayne", "Shamika", "Suk", "Clair", "Olivia", "Hans", "Glennie", ]; for (var i = 0; i < names.length; i++) { value += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5); data.push({ category: names[i], value: value }); } chart.data = data; var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.renderer.grid.template.location = 0; categoryAxis.dataFields.category = "category"; categoryAxis.renderer.minGridDistance = 15; categoryAxis.renderer.grid.template.location = 0.5; categoryAxis.renderer.grid.template.strokeDasharray = "1,3"; categoryAxis.renderer.labels.template.rotation = -90; categoryAxis.renderer.labels.template.horizontalCenter = "left"; categoryAxis.renderer.labels.template.location = 0.5; categoryAxis.renderer.labels.template.adapter.add("dx", function(dx, target) { return -target.maxRight / 2; }) var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.tooltip.disabled = true; valueAxis.renderer.ticks.template.disabled = true; valueAxis.renderer.axisFills.template.disabled = true; var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.categoryX = "category"; series.dataFields.valueY = "value"; series.tooltipHTML = `<center><strong>YEAR 2020</strong></center> <hr /> <table class="test_table"> <tr> <th align="left">Cars</th> <td>1</td> </tr> <tr> <th align="left">Motorcycles</th> <td>2</td> </tr> <tr> <th align="left">Bicycles</th> <td>3</td> </tr> </table> <hr />`; /*series.sequencedInterpolation = true; series.fillOpacity = 0; series.strokeOpacity = 1; series.strokeDashArray = "1,3"; series.columns.template.width = 0.01;*/ var bullet = series.bullets.create(am4charts.CircleBullet); chart.cursor = new am4charts.XYCursor(); chart.scrollbarX = new am4core.Scrollbar(); chart.scrollbarY = new am4core.Scrollbar();

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width: 100%; height: 500px; } .test_table{ color: red; }

 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div>

Here's the doc for further information