Chartjs-ChartJS plotting x/y in a line chart

by

0👍

It looks like a label has to be created for every x value. I may not know the x values at the time of the charts creation

I am not sure how your data arises, but aking into consideration the information provided, you should create an object containing all of your data points and use the object within the chart function.

To provide a solution for this part we would need more input about how your data is built.

I have huge numbers with many decimal places. I assume this will mean that most x values end up between labels.

Well, this is more or less the spirit of a line chart. Depending on the data’s value you should just define your axes properly to get a understandable visualization of your data.

Is there a way to plot the points without having a circular plot point shape? Basically a smooth line running all the way from the left to the right that is created based on the x/y data?

Chart.JS comes with a lot of options to play with. E.g. you could use pointStyle or pointRadius properties to change the points to your needs.

I attached an example for you to adapt as needed. As you can see the lines are smoothly visualized. The example uses multiple chart types in one. You can just remove the bar part.

For further reference check out the official documentation, especially the line-chart part: https://www.chartjs.org/docs/latest/charts/line.html

var optionsMulti = {
            chart: {
              height: 280,
              width: 375,
              type: 'line',
              stacked: false,
              toolbar: {
                show: false
              },
              plotOptions: {
              bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded'
              },
            },
            },
            series: [{
              name: 'Goals scored',
              data: [2, 4, 5, 1, 1, 3, 3, 2, 4, 5, 1, 3]
            }, {
              name: 'Goals Conceded',
              data: [1, 1, 3, 4, 2, 2, 3, 2, 1, 2, 5, 3]
            }, {
              name: 'Points gained',
              type: 'column',
              data: [3, 3, 3, 0, 0, 3, 0, 0, 3, 3, 0, 1]
            }],
            stroke: {
              width: [4, 4, 4],
              curve: 'smooth'
            },
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            xaxis: {
              type: 'category',
              line: {
                show: false
              },
            },
            yaxis: {
              min: 0,
              max: 6,
              tickamount: 6,
              labels: {
                show: false
              },
              line: {
                show: false
              },
            },
          };

          var chartMulti = new ApexCharts(
            document.querySelector("#chartMulti"),
            optionsMulti
          );

          chartMulti.render();
<html>

<body>

<div id="chartMulti"></div>

</body>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

</html>

Leave a comment