Develop Reference

Chart.js Options doesn't work in React.js

I'm trying to position legend on right of my chart but options doesn't work...
import { Chart } from 'react-chartjs-2';
import 'chart.js/auto';
const data = {
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [700, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
}]
};
const TestimonialSection = () => {
return(
<div id="chart">
<Chart type="doughnut" data={data} options={{legend: {position: 'right'}}}/>
</div>
)
}
export default TestimonialSection
I just wrote this file and chart show up, only things that doesn't work is options. Also checked dependency and all look good

for the latest version this is the object structure you must do.
options = {
plugins: {
legend: {
display: false,
position: right,
...
},
}
}

How do we put labels on pie chart arcs - chart.js/vue-chart.js

I am using VueChart js/ chart js to create a pie chart in my vue project, I would like to show % of data inside the each arcs, how do we do it?
My code in Vue:
fillData() {
this.datacollection = {
labels: ['T', 'W', 'R', 'B'],
datasets: [
{
backgroundColor: [
'rgb(51,122,183)',
'rgb(226,142,65)',
'rgb(0,169,157)',
'rgb(217,83,79)',
],
data: [
this.tw.length,
this.w.length,
this.r.length,
this.b.length,
],
hoverBackgroundColor: ['#0275d8', '#f0ad4e', '#5cb85c', '#d9534f'],
},
],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
devicePixelRatio: 2,
tooltips: {
enabled: true,
},
title: {
display: true,
text: 'Arcs state %',
position: 'bottom',
fontSize: 20,
},
};
},
UPDATE I tried the plugin recommended by #zb22 and this but it's not working. I did install the plugin through npm
this.options = {
plugins: {
labels: {
render: 'percentage',
fontColor: ['white', 'white', 'white'],
precision: 2,
},
},
};
I have something like below, and it shows data only when I hove over each arc
My aim is to display my chart as below:

You can use a plugin to achieve this:
https://github.com/emn178/chartjs-plugin-labels
It's well known for this purpose.
This is a demo

Chart js supported plugins page does have a solution for it, it is this plugin chartjs-plugin-datalabels . Make sure you import the module in main.js as like
import labels from 'chartjs-plugin-datalabels';
and then
Vue.use(labels)
and update your Vue page :
this.options = {
plugins: {
labels: [
{
render: 'value',
}
],
},
};
Update: A easier to use module/plugin as mentioned by #zb22 is plugin chartjs-plugin-labels
If you are using vue just import it in your Vue component like
import 'chartjs-plugin-labels';
and use it like
this.options = {
plugins: {
labels: [
{
render: 'percentage',
fontColor: ['green', 'white', 'red'],
precision: 2,
}
],
},
};

chartjs-plugin-datasource implementation in React (react2chartjs)

as the title suggest, i am trying to import data from Excel and display it as charts using ChartJs. Got some idea based on this question : (Import data from Excel and use in Chart.js) and got it working.
But what im trying to do now is to implement this in React using react2chartjs. But failed to do so, got error 'ChartDataSource' is not defined. When i did define it like this:-
import ChartDataSource from 'chartjs-plugin-datasource';
The error resides but the chart display no information
Any idea?.
THE CODE
import React, {Component} from "react";
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datasource';
class Chart extends Component {
constructor(props){
super(props);
this.state = {
chartData:{
datasets: [
{
hoverBorderWidth:5,
hoverBorderColor:'black',
pointStyle: 'rect',
backgroundColor:'green'
//backgroundColor:Array.apply(null, Array(4)).map(_ => getRandomColor())
},
{
hoverBorderWidth:5,
hoverBorderColor:'black',
pointStyle: 'rect',
backgroundColor:'red'
//backgroundColor:Array.apply(null, Array(4)).map(_ => getRandomColor())
}
]
}
}
}
render() {
const option = {
title:{
display:true,
text: 'Test Chart',
fontSize:23,
},
legend:{
display:true,
position:'top',
labels:{
fontColor:'Black',
usePointStyle: true
}
},
layout:{
padding:{
left:0,
right:0,
bottom:0,
top:0
}
},
tooltips:{
enabled:true
},
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
}
}]
},
plugins: {
datasource: {
url: 'Book1.xlsx',
rowMapping: 'index'
}
}
}
return (
<div className="Chart">
<Bar
data={this.chartData}
options={option}
plugins={ChartDataSource}
/>
</div>
)
}
}
export default Chart;

I know this is old, but in case anyone else comes here for a similar issue.
<Bar
data={chartData}
plugins={[ChartDataSource]}// pass as array
options={option}
/>
and url: 'Book1.xlsx' means you have Book1.xlsx in Your project\public\Book1.xlsx

VueJs highstock cant draw graph properly

This is my VueJS code, i use this lib https://www.npmjs.com/package/highcharts-vue
So i dont know how i can get data and set it to series before the graph is drawn. Or if this is not posible, how can i redraw graph properly? Becouse now i set some default data, then get data from page, and redraw graph, but when its done and i see my graph, the scrollbar go to the left side and has a very small range. So how set options without change scrollbar and range selector?
<template>
<highcharts :constructor-type="'stockChart'" :options="options" :updateArgs="[true, false]" ref="linerchart"></highcharts>
</template>
<script>
import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'
stockInit(Highcharts)
export default {
data: () => ({
obj: [],
names: ['CAFF'],
options: {
credits: { enabled: false },
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonTheme: {
visibility: 'visible'
}
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
showCheckbox: false,
events: {
checkboxClick: function (event) {
if (event.checked) {
this.show();
} else {
this.hide();
}
}
}
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> USD<br/>',
split: true
},
series: [{
name: "CAFF",
data: [1,2,3,4,5,6]
}]
}
}),
methods: {
linerGraph() {
var that = this;
this.names.forEach(function(name, i){
axios.get('/test/account/CAFF')
.then(response => {
console.log(response.data)
that.obj.push({name: name, data: response.data});
});
});
this.options.series = that.obj
},
},
components: {
highcharts: Chart
},
mounted() {
console.log(this.$refs.linerchart)
this.linerGraph();
}
}
</script>

You should use other VueJS lifecycle hook point to run axios request, because you are trying to download it when the component is already mounted(), so please try to use one of hook points before that one, e.g created().
Here is the Lifecycle diagram from Vue General Documentation:

Show the latest labels in a bar chart with React.js using react-chartjs

I am working on creating a bar chart in React.js using react-chartjs library. I am able to get the bar chart to display but since my data is huge and it is collected for every 10 seconds. The bar chart displays something like
My dataset for it looks like
var loadData = [{
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)',
borderSkipped: 'bottom'
}
},
responsive: true,
legend: {
position: 'top'
},
title: {
display: true,
text: 'ETL Load Chart'
},
scales: {
xAxes: [{
type: 'time',
ticks: {
autoSkip:true,
maxTicksLimit:20
}
}]
}
},
data: {
labels: [],
datasets: [
{
backgroundColor: "rgba(220,220,220,0.5)",
data: []
}
]
}
}]
I am updating the the data with the help of a library immutability-helpers
case 'GET_LOAD_DATA_RECEIVED':
var payload = action.data.payload
var dataValues = [], labelValues = [];
payload.forEach(function(item){
dataValues.push(parseInt(item['recs_upd']) + 1);
labelValues.push(item['from_ts']);
})
return update(state, {
0: {
data: {
labels: {
$push: labelValues
},
datasets: {
0: {
data: {
$push: dataValues
}
}
}
}
}
})
break;
and I am calling the rendering of Chart like
<Bar data={this.props.loadInfo[0].data} options={this.props.loadInfo[0].options} width="600" height="250" />
I am using "react-chartjs": "^0.8.0", and "chart.js": "^1.1.1" I couldn't update to 2.0 in chart.js were I saw something called showXlabels being present since react-chartjs supports the current version.
Thanks for any help.

Pass only the latest n number of data for every 10 seconds.
const updatedData = {...this.props.loadInfo[0]}
const newData = {
data: {
labels: [...updatedData.labels].reverse().slice(0, 30).reverse(),
datasets: [...updatedData.datasets].reverse().slice(0, 30).reverse(),
}
}
const newLimitedData = {...updatedData, ...newData }
<Bar data={newLimitedData.data} options={newLimitedData.options} width="600" height="250" />
Hope this helps!