ChartJS Line Chart

Custom line chart using chartjs with code showing beneath, illustrating website features.

Creating a ChartJS line chart is easy. What’s not easy, is creating a chartjs line chart that matches the mock. I’ve never seen a design that matches something that’s nearly ready built—in entirety. It always differs. And that’s what’s happening here.

This chartjs line chart is totally customized.

  • toggle the x axis
  • toggle the y axis
  • toggle the grid lines
  • change the amount of grid lines for better accuracy
  • do it all with an elegant menu of said options
  • add a dynamic JSON feed indicative of one or more APIs

Start with the data. This is what both lines expect. Followed by the data in the options menu. I initially thought using JSON for everything was time consuming and complex. Now it’s my preference.

** Line Data
{
  "chartData": [
    {
      "line": [10, 50, 25, 70, 40, 10, 90, 67, 88, 112, 115, 120]
    },
    {
      "line": [20, 30, 25, 35, 40, 64, 65, 67, 75, 100, 100, 100]
    }
  ]
}

** Options Menu Data
{
    "menuOptions": [
        {
            "item": "Y Axis",
            "checkMark": true
        },
        {
            "item": "X Axis Labels",
            "checkMark": true
        },
        {
            "item": "X Axis Grid Lines",
            "checkMark": true
        },{
            "lineOptions": [
                {
                    "value": 7,
                    "percent": 14.28
                },
                {
                    "value": 10,
                    "percent": 10
                },
                {
                    "value": 15,
                    "percent": 6.67
                },
                {
                    "value": 20,
                    "percent": 5
                }
            ]
        }
    ]
}

Then in the line chart TS file, add the variables. Afterwards, pipe the JSON into two separate arrays. This occurs OnInit.

  chart: any;
  chartDataArray: any = []; // Chart Data
  optionsArray: any = []; // Menu Options
  optionsPanel: boolean; // Menu Status
  xGridVisible: boolean = true; // X Axis Lines
  yLabelVisible: boolean = true; // Y Axis Label
  selectedCheckbox: any; // InnerHTML of Selected Checkbox in Legend
  date: any = new Date();
  month: any = this.date.getMonth();
  months: any = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];
  xAxisVisible: boolean = true;
  currentMonth: any = this.months[this.month];

  ngOnInit() {
    // Push JSON to array
    for (let key in data.chartData) {
      if (data.chartData.hasOwnProperty(key)) {
        this.chartDataArray.push(data.chartData[key]);
      }
    }

    // Push JSON to options array
    for (let key in jsonOptions.menuOptions) {
      if (jsonOptions.menuOptions.hasOwnProperty(key)) {
        this.optionsArray.push(jsonOptions.menuOptions[key]);
      }
    }
  }

Then in AfterViewInit, configure the chartjs line chart. This should be get us up and running.

  ngAfterViewInit() {
    let data: any,
      options: any,
      ctx: any = document.getElementById('lineChart') as HTMLElement;

    data = {
      datasets: [
        {
          label: 'Product A',
          backgroundColor: '',
          borderColor: '#02a9f7',
          data: this.chartDataArray[0].line,
          fill: false,
        },
        {
          label: 'Product B',
          fill: false,
          backgroundColor: '',
          borderColor: '#02577a',
          data: this.chartDataArray[1].line,
        },
      ],
      fill: false, // Change this to true, add rgba(...) in datasets background color
    };

    data.labels = this.months;

    options = {
      maintainAspectRatio: false, // Enables custom canvas dimension
      responsive: true,
      layout: {
        padding: {
          top: 20,
          right: 20,
          left: 20,
          bottom: 0,
        },
      },
      title: {
        display: false,
        text: '',
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true,
      },
      legend: {
        display: false,
        position: '',
      },
      scales: {
        yAxes: [
          {
            ticks: {
              display: false,
            },
            gridLines: {
              display: false,
            },
          },
        ],
        xAxes: [
          {
            ticks: { display: this.xAxisVisible },
            gridLines: {
              display: false,
            },
          },
        ],
      },
    };

    this.chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: options,
    });

    // 10 line spaced 10% apart. See options.json
    this.generateXgridLines(10, 10);
  }

Just about everything thus far applies to the canvas tag. Though the markup is a bit heavy, it all relates to the customization of thereof. It’s more of a creative process than a technical one. One in which I enjoy to be honest. It’s an art. And this charting library makes it easier to bypass the hard stuff. Yes, this is written for version 2, but I think it’s the logic behind the project vs the actual code. One could do the same thing with HTML and vanilla JS. Or Vue. Or React. From one developer to the next. Hope you found this thought provoking. Please see a working version of Chartjs Line Chart on Stackblitz here.

Be the first to comment

Leave a Reply

Your email address will not be published.


*