chartist-plugin-axistitle icon indicating copy to clipboard operation
chartist-plugin-axistitle copied to clipboard

Feature request - need a way to update axis labels

Open piotrku opened this issue 5 years ago • 1 comments

When displayed data changes after chartist .update() method it would be nice to have a way to update also the axis labels especially if they are relevant to displayed data like count, sum or average.

piotrku avatar Feb 11 '20 14:02 piotrku

Hi, sorry for the delay in replying.

You can already do this by passing a function as your axisTitle parameter.

var someVariableToChange = "first value";

      function computeMyTitle() {
        return someVariableToChange;
      }

      var chart = new Chartist.Line(
        ".ct-chart",
        {
          labels: ["0-15", "16-30", "31-45", "46-60", "61-75", "76-90"],
          series: [[1, 3, 7, 12, 1, 2, 1, 0]]
        },
        {
          chartPadding: {
            top: 20,
            right: 0,
            bottom: 20,
            left: 0
          },
          axisY: {
            onlyInteger: true
          },
          plugins: [
            Chartist.plugins.ctAxisTitle({
              axisX: {
                axisTitle: computeMyTitle,
                axisClass: "ct-axis-title-test",
                offset: {
                  x: 0,
                  y: 50
                },
                textAnchor: "middle"
              },
              axisY: {
                axisTitle: "Goals",
                axisClass: "ct-axis-title-test2",
                offset: {
                  x: 0,
                  y: -1
                },
                flipTitle: false
              }
            })
          ]
        }
      );

      setTimeout(function() {
        someVariableToChange = "a different value!";
        chart.update();
      }, 3000);

It's not the most elegant solution and when I get a bit of time I may add some more customisation options, the parent plugin doesn't make it particularly easy to update plugin parameters because they don't get updated when you call chart.update() and pass in some new plugin options.

astanb avatar Feb 19 '20 12:02 astanb