Home » Javascript » Chartist: Set labels, but also show all points on graph

Chartist: Set labels, but also show all points on graph

Posted by: admin November 1, 2017 Leave a comment

Questions:

Hello I am using Chartist library to create a graph. I want to be able to set the labels on the x-axis as dates, which I am able to do, but when I do this the chart does not show points between the ticks. It moves the points, regardless of its value, over the ticks. I tried the interpolation func but that just divides the dates evenly along the axis which I do not want. I am okay with the graph being uneven. Is there a way for me to set the labels along the x-axis while also showing all the points between the labels?

var chart = new Chartist.Line('#chartist-graph', {
        series: [
        {
            className: 'past-score',
            name: 'past-score',
            data: [{x: new Date("Wed Sep 14 2016 01:01:00 GMT-0500"), y: 706}, 
                   {x: new Date("Wed Dec 7 2016 01:01:00 GMT-0500"), y: 800},
                   {x: new Date("Thur Jan 19 2017 01:01:00 GMT-0500"), y: 780},
                   {x: new Date("Mon Jun 19 2017 01:01:00 GMT-0500"), y: 880},
                 ]
        }
    ],
    }, 
    {
      lineSmooth: false,
      showArea:true,
      showPoint: true,
      showLine: false,
      fullWidth: true,
      // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
      axisY: {
        // offset: 5,
        type: Chartist.FixedScaleAxis,
        onlyInteger: true,
        low: 0,
        high: 1000,
        divisor: 4
      },
      axisX: {
        type: Chartist.FixedScaleAxis,
        //divisor: 4,
        ticks: [new Date("Wed Sep 14 2016 01:01:00 GMT-0500"), 
                  new Date("Wed Feb 15 2017 01:01:00 GMT-0500"), 
                  new Date("Thur Mar 23 2017 01:01:00 GMT-0500"), 
                  new Date("Thur Aug 17 2017 01:01:00 GMT-0500")]
       },
      plugins: [
        //Chartist.plugins.tooltip()
      ]

    });
Answers: