Additional options for the Chart Component

Bootstrap Studio Help
1

Hello, and thanks for this wonderful app!

I am using the Chart Component, and I need to:

  • Add both (x & y) axes titles or scale labels.

  • Add the numerical values over the color bars. Numerical values are visible via tooltips, but I need them always visible over the color bars instead.

I can't find a way to do those two things using the Options tab inside bootstrap studio. Is there any way to do that?

Any advice will be greatly appreciated!

Thanks in advance!!!

2

You can change the options for your chart with javascript. Here is an example how you add the scale labels

$(document).ready(function() {
chart = document.querySelector('canvas').chart;
updateConfigObject(chart);  
console.log(chart.options); 
function updateConfigObject(chart) {
chart.options = {
        maintainAspectRatio:true,
    title: {
        display: true,
        text: 'Your new title'
    },
    scales: {
        xAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString:"Month"
            }
        }],
        yAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: "Value"
            }
        }]
    }
};
chart.update();
}
 });

You must change all the options you want in your chart you can read more about chart.js here

3

Not that I know a lot about JS etc., but I would have to agree with the OP that since most of the other settings are already included in the chart components via the Options Pane, it would be logical that it should include the ability to place the text as tool-tips or static text within the graphs or wherever you want it. You should not have to alter the JS to do that as far as what I was just checking out. You might "have" to do that at this point though, but I don't think you should "have to" do it, hence the OP's post asking for those changes. Seems logical since you can't drag any text components into the graph area, that the settings should all be in the Options Pane.

4

I agree that the scale labels could be in the option pane and also for the tool tips there could be an option to be tool tips or static text. I think most people that put a graph on their site wants to update the graph after it's published, maybe a button that add another dataset or load a JSON file and apply the data from the JSON to the graph. That can be easily done with javascript. the example above was just a simple way to show how it's done

5

Hello kuligaposten! Thank you so much for your helpful response! I have used the js code that you provided me and everything works fine!!

Now, I have the following issue: I got three different charts on the same page, so, how can I set the options for each one?

I found this related tread: https://bootstrapstudio.io/forums/topic/chart-widget-integration/ There is suggested the following solution: "Give each of your charts a unique id, and then use it to select the appropriate canvas element."

document.querySelector('#graph1 canvas').chart // the first chart
document.querySelector('#graph2 canvas').chart // the second chart

I realized that it is not possible to give neither classes nor ids to the canvas element (with te canvas element selected, the Atributes section display the message: "This element doesn´t accept attributes"), so I wonder how can I give each of the charts a unique id, in order to set the options for each one separately.

Thank you so much!!

PD: Of course, I give my vote to get this options accesible inside bootstrap studio too!

6

If you give each div where your charts are a unique id for example myGraph1, myGraph2, myGraph3 then you can change the exaple above like this

var chart1,chart2,chart3;
chart1 = document.querySelector('#myGraph1 canvas').chart;
chart2 = document.querySelector('#myGraph2 canvas').chart;
chart3 = document.querySelector('#myGraph3 canvas').chart;
updateConfigObject(chart1);
updateConfigObject(chart2);
updateConfigObject(chart3);

If you want the numerical values over the color bars you need a plugin for chartjs, like this one if it is just the scales you want to update then in the function updateConfigObject you can move the chart. from chart.options to and put it infront of scales so you have chart.scales and delete the options part above chart.scales then it is only the scales that get updated. you can have a look and download an exaple here

7

@kuligaposten Thank you so much for your help!!!

Te link with the example is broken (https://cold-sound-7497.bss.design/).