score:5
Accepted answer
You can set the popover options in JavaScript directly, and you can also listen to events.
The important option here is html: true
which enables placing HTML within the popover content, otherwise shown as a string.
The content
option documentation states:
Default content value if
data-content
attribute isn't present.
Then, listening to the shown.bs.popover
event, we get the previously placed <canvas>
with jQuery and pass it as the context for a new Chart.js instance.
$('[data-toggle="popover"]').popover({
html: true,
content: '<canvas id="myChart" width="400" height="400"></canvas>',
}).on('shown.bs.popover', function() {
new Chart($('#myChart'), {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
// Configuration options go here
options: {}
});
});
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Good vs. Evil Winrate" data-placement="bottom">Who's Winning?</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
Source: stackoverflow.com
Related Query
- Placing JavaScript content in Bootstrap Popover
- Passing an Array from a Flask view to the javascript code of another view
- 'require is not defined' error when attempting to use chartjs in javascript code
- Fit all content inside a HTML page designed using bootstrap in the viewable area without need to scroll
- How pass a variable from code behind to javascript
- How to run Chart.js samples using source code
- Adapting a JavaScript code to be dynamic
- Bootstrap tab is working but the tab content is not showing
- Javascript highcharts code similar to image
- JavaScript Chart.js - Custom data formatting to display on tooltip
- Dynamically update the options of a chart in chartjs using Javascript
- Bootstrap 3 tabs & Chart.js - charts not loading on tabs
- Bootstrap grid not working with canvas
- How to add datas to chart js from javascript array itself?
- Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
- Javascript Chart.js scale fix
- ChartJS won't draw graph inside bootstrap tab until window resize
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Chart.JS full-width, responsive doughnut chart with Bootstrap
- How to pass model object to javascript function in asp.net Core
- Laravel - Bootstrap Javascript's conflict with Chart.js
- How to convert an array of strings to float in Javascript
- Drawing line chart in chart.js placing dots only when value changes
- Is there a JavaScript Method/ Function to loop Objects via Keys into a array?
- convert javascript to dart
- Loop Dataset ChartJS Javascript
- Chart.js is it possible to fire javascript when clicking on point on the graph?
- JavaScript - Chart.js tooltip shows wrong x-axis value
- How can I show Bootstrap modal when on click in individual bars in chart.js
- Populating javascript chart with Razor model data
More Query from same tag
- Force two Chart.js doughnut charts with legends to same size in Bootstrap columns
- Bug : Overlay loading automatically (bootstrap) (laravel 5.2)
- How can I set 3 color to the same chartjs bar?
- Can't draw pie chart using chartjs - TypeError: Cannot create property '_meta' on number '16'
- Is there a way to draw floating rectangle using chart.js
- Chart.js display x axis labels ON ticks in bar chart, not between
- ChartJS automatically scaled chart has undefined min and max
- How to only have a Y axes representing data in chart.js
- How to fill a graph by a color till a vertical line using chart.js
- Change chart.js options based on window width
- Customize Chart js dataset data
- Timeline on Y axis, with chart.js
- ChartJS Annotation Hide /Show
- Chart.js V3 Fill Below 0
- bower degrades chart.js each time installing other packages
- Show data dynamically in line chart - ChartJS
- How to set the gap between data items in a chartjs chart
- Chart js padding isn't working for data labels
- Bar chart legend adjustments - Chart JS
- Chart.js set Doughnut background-color?
- 0 line style of Chart.js line chart
- How to save the previous state and current state for a barchart in reactjs
- Changing the Y axis unit in Chartjs
- chart.js sum of the last 3h datavalues in a line chart
- Cant To CHange Chart.js Legend
- Graph streaming real-time data with react and chartjs
- Update ChartJS with MySQL Data
- How can I remove the white border from Chart.js pie chart when all legends are hidden?
- Chart js with json file from url
- How to refresh chart in django without refreshing whole page