score:21
Accepted answer
You can see the full code on this jsFiddle and here is its result after a click :
Since you store your chart data in a variable (called data
in your code), you can do it with a simple function on a button :
$('button').click(function() {
// You create the new dataset `Vendas` with new data and color to differentiate
var newDataset = {
label: "Vendas",
backgroundColor: 'rgba(99, 255, 132, 0.2)',
borderColor: 'rgba(99, 255, 132, 1)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 60, 70],
}
// You add the newly created dataset to the list of `data`
data.datasets.push(newDataset);
// You update the chart to take into account the new dataset
myBarChart.update();
});
You can see the full code on this jsFiddle and here is its result after a click :
score:0
based on tektiv answer only, it didn't work for me. I constructed the newDataSet just like he suggested, but I had a problem while pushing the Data. to fix this, i had to do:
data.config.data.datasets.push(newDataSet);
instead of:
data.datasets.push(newDataSet);
Source: stackoverflow.com
Related Query
- Add DataSet Bar Chart - Chart.JS
- How to add an offset to a dataset in Chart js
- ChartJS add tooltip to a grouped bar chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js - Add gradient to bar chart
- how to add a title to my ng2-charts bar chart
- Add a custom label to the top or bottom of a stacked bar chart
- How to add background image in bar chart column in Chart.js?
- Chart.js v3: Tooltip callback doesn't identify clicked dataset of stacked bar chart
- Add HTML to label of bar chart - chart js
- Create stacked bar chart with a single dataset per stack
- Add Labels to Chart.js Bar Chart
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- ChartJS: Highlight dataset in a stacked bar chart when hovering over the legend?
- chart js bar chart add animation to change color
- How to add unused data background to bar in chart js
- ChartJS add custom tooltip to a stacked bar chart
- How to add labels on top of the chart bar with Chart.js 2
- Bar chart from Chart.js not showing the second dataset
- Add images inside bar chart in chart.js
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- chartjs add dots to bars in grouped bar chart
- Chart JS attempt to stacked bar chart tooltip for only one dataset
- Chartjs Bar Chart add background color to value labels
- Add bar chart in a column
- How to assign values to different lables(legends) of my dataset of stacked bar chart
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to add label square to Bar Chart using Chart.js
- Add a click event to the bar chart of chartjs
- How to add vertical line in bar chart using chartJs and ng2-charts?
More Query from same tag
- Chartjs to show more set of data of click of a button
- Chart.js not appearing in tabs
- ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)
- chart.js responsive bar chart label sizing
- Chart.js - Add gradient to bar chart
- Vue.js - this.<value>.<value> is undefined
- Adding line over stacked line chart with ChartJS
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- Always Enable Tooltip : Chart JS : V3 : Bubble Chart : react-chartjs-2
- Change mouse cursor to pointer in charts js
- Chart JS Logarithmic x-axis
- Stacked Floating Horizontal Bar using ChartJS
- Using Chart.js in Web Worker
- How to add faded background to stack chart in react native
- Default font size doesn't change ChartJS
- Animate Chart.JS Only Once
- Mixed chart barchart won't show
- Hide all labels and tooltips in Chart.js and make it very small size
- Add new chart.js when clicking a button, but get 'Cannot read property 'getContext' of null'
- Chartjs – change tooltip border radius
- Use multiple datasets with Javascript Chart
- How to apply to different bground color for each area in Chart.js
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Chart.js drawing line between two points
- Error with Chart.js : TypeError: t is undefined
- Chart.JS canvas gets larger every time drawn
- Pie chart inside doughnut on same canvas
- Charts.js candlestick (Financial Charts) Timeformat Question
- Chart.js: passing objects instead of int values as data
- ChartJS: Percentage labels