0

EDIT : OK, It was my css page which had a rule on path, 'cause I use svg a lot. Removed that rule and the problem was gone !

I'm facing something pretty annoying and which I do not understand.

I'm using amChart to make a XY chart with multiple series. Not that hard. The thing is, I can't customize my series ! Bullets and legend are ok, but not series.

Here's a screenshot for better understanding :

MyWeirdChart (new OP can't embed images, sorry)

As you can see I have my custom bullet pushed on my series and my legend is exactly what I want for my chart BUT series are staying unchanged.

Here is my JS draw function :

function drawChart(dateArray, casesArray, deathsArray, healedArray, hospitalizationsArray, reanimationsArray) {
    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.data = generateChartData(dateArray, casesArray, deathsArray, healedArray, hospitalizationsArray, reanimationsArray);

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    function pushSeries(field, name, color) {
        let series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.valueY = field;
        series.dataFields.dateX = "date";
        series.name = name;
        series.tooltipText = name + ": [b]{valueY}[/]";
        series.stroke = am4core.color(color);
        series.strokeWidth = 3;
        series.fill = am4core.color(color);
        series.fillOpacity = 0.5;

        let bullet = series.bullets.push(new am4charts.CircleBullet());
        bullet.circle.stroke = am4core.color(color);
        bullet.circle.strokeWidth = 2;
        bullet.circle.fill = am4core.color(color);
        bullet.circle.fillOpacity = 0.5;
        bullet.circle.radius = 3;

    }

    pushSeries("cases", "Cas confirmés", "#32B3E3");
    pushSeries("healed", "Guéris", "#00C750");
    pushSeries("hospitalizations", "Hospitalisations", "#FFBB33");
    pushSeries("reanimations", "Réanimations", "#FE3446");
    pushSeries("deaths", "Morts", "black");

    chart.cursor = new am4charts.XYCursor();
    chart.scrollbarX = new am4core.Scrollbar();
    chart.legend = new am4charts.Legend();
    chart.cursor.maxTooltipDistance = 0;
}

Did I miss something ? I crawled forums and documentations and I'm now helpless. My code is in my webpack app.js file. But I include amCharts with HTML scripts,

<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>

not with webpack import. But I guess that if this was the problem, I would not be able to draw a chart at all.

Nedwor
  • 1
  • 1

1 Answers1

0

OK, It was my css page which had a rule on path, 'cause I use svg a lot. Removed that rule and the problem was gone !

Nedwor
  • 1
  • 1