How to use plugins with chartjs

Bootstrap Studio Help
1

Hi all,

tldr
How to use plugins in Bootstrap studio?

I am new to the forum but old with bootstrap studio. I have been using this for couple of years and now I can’t figure the issue that I am facing and hopefully someone can help me.

In the past I have been using amCharts on my site but now I chose to move towards chartjs. Current version of the studio also has it implemented as UI tool but I need more and that is why I am using purely javascript.

Now I am facing issue since I can make chart with no issue but I can’t seem to add any plugins for the chart. I just can’t figure it out. I am trying to add zoom and pan functionality for my chart but it won’t happen… GitHub - chartjs/chartjs-plugin-zoom: Zoom and pan plugin for Chart.js

My script is from example

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        plugins: {
            zoom: {
                // Container for pan options
                pan: {
                    // Boolean to enable panning
                    enabled: true,
                    // Panning directions. Remove the appropriate direction to disable 
                    // Eg. 'y' would only allow panning in the y direction
                    mode: 'xy'
                },
                // Container for zoom options
                zoom: {
                    // Boolean to enable zooming
                    enabled: true,

                    // Zooming directions. Remove the appropriate direction to disable 
                    // Eg. 'y' would only allow zooming in the y direction
                    mode: 'xy',
                }
            }
        }
    }
});

And I am trying to initialize the zoom plugin prior the script with

Chart.plugins.register({
    id: 'chartjs-plugin-zoom'
    // ...
});

I can see the chart just fine but I can’t pan or zoom the cart! Here is codepen for the script

So please, how can I use plugins for charts in Bootstrap studio?

TIA,
Heikki

2

Not sure what you’re talking about for “plugins” on this. If you made the component into a Custom Code block then you cannot edit it with any of the drag and drop or settings in BSS. You will have to add anything to it manually in your custom code blocks.

3

Hi, I am aware that custom code can’t be configured trough BSS and the testing has to be done on browser.

The chartjs has ton of really useful plugins that will add customisations for graphs, more here: Plugins · Chart.js documentation

I am just failing to use them in BSS. Quite sure it is user error😅

4

There is no problem with the example on the codepen in bss
did you link the external files?

https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js
https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js
https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js

the order must be like above
your initialize code no needed
have a look here

I like the zoom in highcharts
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series

5

Oh yes, now it is working! The order was wrong for the external files :nerd_face: Also has some issues after that to make js functions for enabling and disabling the pan so I can have multipurpose for the functions.

Thanks for the help! Now I’ll need to see if I can make panning work also with the “native” component since I can’t set the functionality initially for chart options.

6

@H3ikki
if you give the div with the chart an id=myChart in this case, then you can add the zoom plugin to the bss chart component like this

$(function(){
let chart = document.querySelector('#myChart canvas').chart;
// check if the chart is on the page to avoid error if not
if(chart){
	let plugins = {
		zoom: {
			// Container for pan options
			pan: {
				// Boolean to enable panning
				enabled: true,
				// Panning directions. Remove the appropriate direction to disable 
				// Eg. 'y' would only allow panning in the y direction
				mode: 'xy'
			},
			// Container for zoom options
			zoom: {
				// Boolean to enable zooming
				enabled: true,
				// Zooming directions. Remove the appropriate direction to disable 
				// Eg. 'y' would only allow zooming in the y direction
				mode: 'xy',
			}
		}
		// if you have more plugins here is the place to add another plugin
	}
	chart.options.plugins = plugins;
	chart.update();
}
});

here is an example

7

@kuligaposten kudos to you! Nice job! I have made custom chart all the way now but this solution would reduce the js fiddling. I’ll need to take a look.

Since it seems that You are very capable with this stuff could I present another challenge for you: GitHub - jjppof/chartjs-plugin-zoom-pan-select: A chartjs plugin for zooming, panning and select data in a chartjs instance. This would be the ultimate goal where I am aiming with my chart but yet again, I failed to implement this to my solution. Can you make it work with BBS?

Br,
Heikki

8

@H3ikki

yes without any problems

9

@kuligaposten
Wow, close but no cigar. I am still failing even when starting new project and trying to mimic the source code that you provided with following error.

ChartJSEnhancements.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

How or where should I include the actual file so it is used correctly?

10

maybe easier for you

11

There seems to be some issue with the link:

image
image723×387 12.7 KB

“Requested file not found”

12

@H3ikki

Lähetin sinulle sähköpostin

13

Thanks, real work has taken my day but now I am going trough the file. I can get it running in preview and now I’ll try to figure out how to export it correctly to my site. Thanks for your help so far!