score:4
Accepted answer
You can use Array.map
to extract necessary data.
<script>
import VueCharts from 'vue-chartjs'
import { Pie, Bar, mixins } from 'vue-chartjs'
import axios from 'axios'
export default {
mixins: [mixins.reactiveData],
data() {
return {
chartData: ''
}
},
extends: Bar,
mounted() {
this.renderChart(this.chartData)
},
created() {
axios.get(`https://localhost:44379/api/DailyStudents`)
.then(response => {
// JSON responses are automatically parsed.
const responseData = response.data
this.chartData = {
labels: responseData.map(item => item.day),
datasets: [
label: 'Daily Students',
backgroundColor: '#f87979',
data: responseData.map(item => item.totalStudents)
]
}
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
Note that you need to use mixins.reactiveData
to make component reactive with data change.
Source: stackoverflow.com
Related Query
- Vuejs with ChartJS populate from API
- Chartjs not working with d3 from csv source
- How to get Data from API to display chart using chartjs in Vuejs
- Vuejs - Chartjs doesn't render my own options with api request
- Populating a chartJS with data from API through axios (VueJS)
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to work out Chartjs using TypeScript with Chartjs.definitelyTyped from github
- Using data from API with Chart JS
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to create chartjs chart with data from database C#
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to prevent tick labels from "jumping" when drawn with ChartJS BeforeDraw
- Initialize a Chart.js chart with data from an api
- Trying to use axios, vuejs and a dummy api for my chartjs and googlecharts (get requests only)
- chartjs xaxis ticks with round values from shifted input data
- Populate chartjs ajax with datetime fields
- using ajax populate dynamic piechart from chartjs
- The chart doesn't display the data from my call to the API with Axios
- Chartjs populate data with Axios response
- Updating Chartjs to 2.5 with custom code
- Flickering of charts and getcontext error with chartjs in the context of Vuejs
- Svelte , pass data to chartjs from API
- Vue chartjs is not rendering from API
- How to load new chart (chartsjs) from api call with jquery?
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Uncaught (in promise) TypeError: Cannot read property 'length' of undefined in chartjs with Vuejs
- Date selection not happening with a click in chartjs in the context of vuejs
- Generate PDF from HTML page made with Bootstrap and ChartJS in Laravel
- Calling data from outside of Chartjs code
- VueJS + Chartjs - Chart only renders after code change
More Query from same tag
- How can I show gridlines only of the even value ones withchartjs?
- How do I refresh data from json-file with charts.js?
- How to split a List into View in C#
- how to set the color of all points in a line graph to the same in chart.js?
- PrimeNg Pie Chart - By default show all tooltip?
- Implementing range slider in Chart.js
- Chartjs-2(React), Lines do not appear
- ChartJS - can't display all the items in the array
- How to remove automatically applied background color to the body?
- Angular .subscribe executes at the end after the ngOnInit
- Side effects from Chartjs for only *some* clients
- Chart js shows old data on mouse hover
- Set minimum number of steps in line chart
- Display values in Pareto chart using Chart.js 2.0.2
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- How to add faded background to stack chart in react native
- Add custom data scale to Chart.js
- Setting up min and max in chartjs did not work
- Add shadow Chart.js
- How to display Labels on Doughnut chart in Chart.js
- chart.js automatic x axis distributed in time milliseconds
- No rendered annotation line on Line Chart
- How to hide radar chart index labels (chart.js)
- Creating Stacked chart.js graph from array
- How to pass data for stacked chart in vue-chartkick
- How to export a chart in Excel and PDF format using Chart.js
- Storybook: Changing the value of the control doesnot rerender the Chart.js canvas
- Bar Color In Chart JS
- Chartjs - Two Y-axis scale problems
- Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one