[Chartjs]-How to change chart JS title text on change input field?

by

1👍

You will need to put your new Chart into a variable that is accessible in your function that runs when your user is done typing.

After this you can call:

chartVariable.options.title.text = userInput;
chartVariable.update();

See fiddle link where after chart creation I update title to dddd from ffff: https://jsfiddle.net/Leelenaleee/0vxcwqft/4/

0👍

I’m not sure how to change the built-in title, but you can hide it or omit it and use a regular heading element instead, if that works for you then this is a working solution

One way to do that is to listen to the input value changing and then grabbing it every time it changes and adding it to the title, like this:

var chartTitleInput = document.getElementById("chart-title-input");
var chartTitle = document.getElementById("chart-title")

chartTitleInput.addEventListener("change", function(){
  var title = chartTitleInput.value;
  chartTitle.textContent = title;
})
<input id="chart-title-input" type="text">
<h1 id="chart-title"></h1>

I used the change event but you can use keyup or keydown events if you like. change event will only fire when the value of the input changes and every time it changes. The user will be able to see changes when they press enter or leave the input field (the input field loses focus) only if the current value isn’t the same as the previous value though because then the change event won’t fire, while a keyup event will fire, for example.

Leave a comment