I am trying to figure out how to take the 3 hardcoded variables [index, fieldName, aggType] and pass data in to them from a json file dynamically, and then pass that variable into the (inData) function that I created, and then finally pass those into the charts that I have created. I am not exactly sure how to go about referencing the data and getting it into the variable. I placed my code below. Please, let me know if I can clarify this any, it is a bit confusing. Index name is the ES index, fieldname is the field to aggregate against and aggType is the type of aggregation like count, sum etc...There was a suggested answer to this question, using the forEach option, however, this was not a good fit for my situation, as it would be necessary to pass multiple lines in some queries, or singular lines in others. The forEach option would force us to deal with each option in an individual way. We wanted to be able to pass the query as a whole. Thank you for all your help. The anser I came up with is below.
mainchart.js
$('#chartType').change(function(index, val) {
buildChart($(this).val())
})
function line() {
let labels = []
let data = []
let index = 'issflightplan';
let fieldName = 'VehicleType';
let aggtype = 'count';
$.getJSON("http://localhost:3000/data/issflightplan/VehicleType/count/", function (inData) {
aggregationName = index + "|" + fieldName + "|" + aggtype
for (keyNo in inData.aggregations[aggregationName].buckets) {
labels.push(inData.aggregations[aggregationName].buckets[keyNo].key)
data.push(inData.aggregations[aggregationName].buckets[keyNo].doc_count)
}
// });
console.log(data)
var ctx = document.getElementById('myChart').getContext('2d');
var gradient = ctx.createLinearGradient(450, 0, 0, 0);
gradient.addColorStop(0, 'rgb(0,99,132)');
gradient.addColorStop(1, 'rgb(255,99,132)')
var gradient2 = ctx.createLinearGradient(0, 0, 0, 450);
gradient2.addColorStop(0, 'rgb(0,50,600)');
gradient2.addColorStop(1, 'rgb(150,0,100)')
function drillDownChart(click, mydata) {
if (mydata[0]) {
var x = mydata[0]['_index'];
window.location.href = 'https://chart-js.com/'
}
};
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'My New Line Chart',
data: data,
backgroundColor: gradient,
borderColor: 'blue',
borderWidth: 1,
borderDash: [10, 5, 10, 2],
borderDashOffset: 10,
borderCapStyle: 'round',
borderJoinStyle: 'bevel',
cubicInterpolationMode: '',
fill: true,
lineTension: 0.2,
pointBackgroundColor: ['red', 'yellow', 'purple', 'orange', 'green', 'blue', 'pink'],
pointBorderColor: ['red', 'yellow', 'purple', 'orange', 'green', 'blue', 'pink'],
pointBorderWidth: 3,
pointRadius: 2,
pointStyle: 'circle',
pointHitRadius: 20,
pointHoverBackgroundColor: 'purple',
pointHoverBorderColor: 'pink',
pointHoverBorderWidth: 5,
pointHoverRadius: 10,
showLine: true,
spanGaps: true,
steppedLine: false
}, {
label: ['My New Line Chart 2'],
data: data.datapoints2,
// backgroundColor: gradient2,
borderColor: gradient2,
fill: false
}]
},
// Configuration options go here
options: {
onClick: drillDownChart,
// onClick: updateChart,
legendCallback: function (line) {
var text = [];
text.push('<ul class="legendClass">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li class = style = "background: ' + chart.data.datasets[i].backgroundColor + ' ">');
text.push(chart.data.datasets.label[i]);
text.push('</li>')
}
text.push('</ul>');
return text.join("");
},
ticks: {
autoSkip: true
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
fontSize: 16,
responsive: true,
},
plugins: {
title: {
display: true,
// text: obj.title,
position: "top",
fontSize: 16,
fontFamily: "New Times Roman",
fontColor: 'blue',
fontStyle: 'bold',
padding: 10,
lineHeight: 1.2,
},
legend: {
display: true,
//need to be able to pass the options into you from the data
position: "bottom",
align: 'center',
fullWidth: true,
// onClick: alertBox,
// onHover: changeFontColor,
labels: {
boxWidth: 20,
fontSize: 10,
fontStyle: 'bold',
fontColor: 'black',
fontFamily: 'Times New Roman',
padding: 10,
usePointStyle: 'circle',
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
value: '18B',
borderColor: 'red',
borderWidth: 2
}],
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
position: 'nearest',
backgroundColor: 'rgb(0, 0, 132)',
titleFontFamily: 'New Times Roman',
titleFontSize: 16,
titleFontStyle: 'normal',
titleFontColor: '#yellow',
titleSpacing: 10,
titleMarginbottom: 15,
bodyFontFamily: 'New Times roman',
bodyFontSize: 15,
bodyFontStyle: 'normal',
bodyFontColor: 'rgb(0,15,132)',
bodySpacing: 3,
xPadding: 10,
yPadding: 10,
caretPadding: 5,
cornerRadius: 20,
// multiKeyBackground: '()',
displayColors: true,
callbacks: {
title: function (tooltipItems, data) {
// Pick first xLabel for now
var title = chartType;
var labels = data.labels;
var labelCount = labels ? labels.length : 0;
if (tooltipItems.length > 0) {
var item = tooltipItems[0];
if (item.xLabel) {
title = labels[item.index];
} else if (labelCount > 0 && item.index < labelCount) {
title = labels[item.index];
}
}
return title;
},
events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
onClick: function (event, arry) {
getcurrentfilter(event, arry)
}
}
}
}
}
}
}
});
console.log(data)
})
}
mydata.json
{
"hits": [...],
"aggregations": {
"issflightplan|VehicleType|count":{
"meta": {...},
"buckets": [
{
"key": "Progress",
"doc_count":77
},
"issflightplan|CrewSize|count": {
"meta": {...},
"buckets": [
{
"key": "",
"doc_count": 32
},
I wanted to post the answer that I came up, and it is working well, and gives the ability to add some different options to the function later on.
function line() {
let labels = []
let data = []
$.getJSON("http://localhost:3000/data/issflightplan/VehicleType/count/", function (inData) {
let aggregationName = []
for (aggName in inData.aggregations) {
console.log(aggName)
for( bucket in inData.aggregations[aggName].buckets) {
labels.push(inData.aggregations[aggName].buckets[bucket].key)
data.push(inData.aggregations[aggName].buckets[bucket].doc_count)
}
}
Related
I am making a chart using chart.js in react environment.
If you look at the second image, what if there is 130% along the Horizontal Line? 100 is formed with gray and above 100 green. I also want to make it in the same format as above.
I've been looking for it for 2 days, but I don't know how to do it
This is my work in progress.
I want to make it in this format.
This is my code.
import { Bar, Chart } from 'react-chartjs-2';
import annotationPlugin from "chartjs-plugin-annotation";
import "chartjs-plugin-datalabels";
import ChartDataLabels from "chartjs-plugin-datalabels";
Chart.register([annotationPlugin], [ChartDataLabels] );
let chartColors = {
yellow: '#F4D068',
green: '#4CC26F',
gray: '#EBEBEB'
};
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
label: 'My First dataset',
backgroundColor: [],
borderColor: '#EBEBEB',
borderWidth: 1,
borderRadius: 10,
data: [65, 140, 130, 200, 56, 35, 80],
random: ['Check', 'Out', 'Udemy', 'Course', 'Charjs 3', 'Coming Out', 'Next week'],
},
],
};
let colorChangeValue = 100;
let dataset = data.datasets[0];
for (let i = 0; i < dataset.data.length; i++) {
if (dataset.data[i] > colorChangeValue) {
dataset.backgroundColor[i] = chartColors.green;
if (dataset.data[i] < 100) {
dataset.backgroundColor[i] = chartColors.gray;
}
}
if (dataset.data[i] < colorChangeValue) {
dataset.backgroundColor[i] = chartColors.yellow;
}
}
return (
<Bar
data={data}
width={100}
height={70}
options={{
scales: {
x: {
stacked: true,
grid: {
display: false,
},
},
y: {
stacked: true,
grid: {
},
ticks: {
maxTicksLimit: 1
}
}
},
plugins: {
legend: {
display: false
},
title: {
display: true,
text: "범례1",
padding: {
bottom: 30
},
weight: "bold",
color: "#00325c",
font: {
size: 13
},
align: "start"
},
datalabels: {
display: true,
color: "black",
anchor: 'end',
align: 'top',
formatter: function (value) {
return "\n" + value + "%";
}
}
},
annotations: {
myHorizontalLine: {
type: "line",
scaleID: "y",
borderWidth: 3,
borderColor: "#333333",
value: 100,
borderDash: [8, 8],
label: {
font: {
weight: "normal"
},
rotation: "auto",
enabled: true
}
},
}
}}
/>
)
You could define a second dataset that does nothing but drawing the gray space up to the limit of 100.
{
backgroundColor: '#DDD',
hoverBackgroundColor: '#DDD',
data: [100, 0, 0, 0, 100, 100],
datalabels: {
display: false
}
},
Also make sure that only the x-axis has the option stacked: true.
Together with this, you'll also need to adjust some other options. A tooltip.filter for example will prevent Chart.js from showing a tooltip for the second dataset.
tooltip: {
filter: tooltipItem => !tooltipItem.datasetIndex
},
Please take a look at the StackBlitz with your amended code and see how it works.
Here is my chart:
And here is the chart I need:
The difference is that first chart doesn't have borders but second has 2 of them: white and gray
These are the options I use:
let activityTypeChart = new Chart(document.getElementById("pie-chart-activity-type-widget"), {
type: 'doughnut',
data: {
labels,
datasets: [{
label: "Average Duration of Each Task Type",
backgroundColor: colors,
data: GetActivityTypeCounters(),
}],
},
options: {
title: {
display: false,
},
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index] || '';
return label;
}
}
},
cutoutPercentage: 65,
hover: {
onHover: function(e, a) {
$("#activity-type-widget").css("cursor", a[0] ? "pointer" : "default");
}
}
},
});
If I try to use border, borderWidth, etc., the border actually has only 1 color. Is there a way to set 2 or more borders, maybe using gradient somehow?
Since you didn't receive an answer so far, I allow myself to propose a solution that works in case your chart is of a fixed size. This is far from being a perfect solution but the user won't notice the rather weird code behind.
You can fake the outer and inner borders by defining additional datasets as shown in the code snippet below.
new Chart("myChart", {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
data: [1, 1, 1],
borderColor: "#CCCCCC",
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"], // required for correct legend colors
weight: 0.01,
borderWidth: 1
},
{
data: [1],
backgroundColor: "#FFFFFF",
hoverBackgroundColor: "#FFFFFF",
weight: 0.1,
borderWidth: 1
},
{
data: [200, 100, 25],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
},
{
data: [1],
backgroundColor: "#FFFFFF",
hoverBackgroundColor: "#FFFFFF",
weight: 0.1,
borderWidth: 0
},
{
data: [1, 1, 1],
borderColor: "#CCCCCC",
weight: 0.03,
borderWidth: 1
}]
},
options: {
legend: {
display: true
},
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 2
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
I am a noob in angular. I already have a bar-chart component and I am using that component in several places across the project. now I want to implement the horizontal bar chart by modifying that bar chart component but I am stuck at this point and not moving forward. there are no errors and below code implementing a normal bar chart. Thanks in advance
bar-chart component
dataCtx: any;
bar_chart: any;
#ViewChild('barChart') barChartRef: ElementRef;
#Input() data = [];
#Input() type: string;
#Input() hoverData: Array<string>;
#Input() yLabel: any;
#Input() xLabel: any;
#Input() label?: string;
#Input() barLabel?: string;
#Input() nameObj?: any;
#Input() showLabel: boolean;
#Input() charType: string;
color = [];
#Output() onSegClick = new EventEmitter<any>();
colors: Array<string> = ["rgba(98, 228, 98, 1)", "rgba(248, 227, 117, 1)", "rgba(250, 99,131, 1)", 'red', 'blue', 'violet', 'orange'];
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
this.renderChart();
}
ngOnChanges() {
if (this.barChartRef)
this.renderChart();
}
renderChart() {
let self = this;
this.dataCtx = this.barChartRef.nativeElement.getContext('2d');
let gradient_1 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
gradient_1.addColorStop(0, ' #c4743e');
gradient_1.addColorStop(1, 'transparent');
let gradient_2 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
gradient_2.addColorStop(0, 'beige');
gradient_2.addColorStop(1, 'transparent');
let gradient_3 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
gradient_3.addColorStop(0, '#2f7ca7');
gradient_3.addColorStop(1, "transparent");
this.bar_chart = new Chart(this.dataCtx, {
type: this.charType || 'bar',
data: {
labels: this.nameObj.map(obj => obj.name),
datasets: this.setChartData()
},
options: {
legend: {
display: this.showLabel,
labels: {
padding: 20,
fontStyle: 'bold',
fontSize: 16,
}
},
title: {
display: this.label ? true : false,
text: this.label,
fontStyle: 'bold',
fontSize: 20,
},
showAllTooltips: true,
toolTips: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
categoryPercentage: 0.65,
// barPercentage: 1.0,
// barThickness: 50,
maxBarThickness: 50,
display: true,
scaleLabel: {
display: true,
fontStyle: 'bold',
labelString: this.yLabel
},
ticks: {
autoSkip: false
},
gridLines: {
color: 'rgba(88, 88, 88, 0.35)',
lineWidth: 2.5
}
}],
yAxes: [{
// stacked: true,
display: true,
scaleLabel: {
display: true,
fontStyle: 'bold',
labelString: this.xLabel
},
ticks: {
min: 0,
max: 100,
},
gridLines: {
color: 'rgba(0, 78, 162, 0.5)',
lineWidth: 0.5
}
}]
},
responsive: true,
onClick: function (evt, arr) {
if (arr[0]) {
self.onSegClick.emit(arr[0]._index);
}
},
}
});
}
cohortProf(options) {
let cohortData = [{
data: this.data.map(coh => Math.floor(coh.proficiency * 100)),
backgroundColor: '#0080FF',
options
}]
return cohortData;
}
testData() {
let testData = [];
this.data.forEach((d, i) => {
let val = Math.floor(d.data * 100);
testData.push(val);
this.color.push('#' + (Math.random() * 0xFFFFFF << 0).toString(16));
// this.color.push('hsl('+ val +', 100%, 50%)')
});
return testData;
}
testProf(options) {
let testData = [{
data: this.testData(),
backgroundColor: this.color,
options
}]
return testData;
}
subjectProf(options) {
let subData = [];
let strat = this.hoverData;
this.data.filter((d, index) => { subData.push({ "data": d, "backgroundColor": this.colors[index], options, label: strat[index] }) });
return subData;
}
setChartData() {
let dataSet: any;
let fixed_options = {
borderColor: 'tranparent',
borderWidth: 2,
pointBorderColor: 'transparent',
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: "#fff",
pointHighlightFill: "#fff",
pointRadius: 3,
pointHitRadius: 20,
pointBorderWidth: 1,
};
switch (this.type) {
case 'test': {
dataSet = this.testProf(fixed_options);
break;
}
case 'cohort': {
dataSet = this.cohortProf(fixed_options);
break;
}
case 'grouped-chart': {
dataSet = this.subjectProf(fixed_options);
break;
}
case 'single-bar': {
dataSet = [{
data: this.data,
backgroundColor: this.colors,
label: 'Analytics'
}];
break;
}
default: {
break;
}
}
return dataSet;
}
}
reusing the same component to implement horizontal bar chart
horizantalChart = {
data:[[10,20],[30,40]]
}
<bar-chart [type]="'single-bar'" [hoverData]="['Experts Avg. Score', 'Others Avg. Score']" barLabel="Proficiency"
[data]="horizontalChart.data" [nameObj]="uploadAnalytics.analytics" yLabel="Quizzes" chartType="horizontalBar"
[xLabel]="'Average Upload Score'" [showLabel]="true" (onSegClick)="selectBar($event)"></bar-chart>
The output of the code looks like this
Inside the renderChart method of your bar-chart component, the chart is currently created as follows:
this.bar_chart = new Chart(this.dataCtx, {
type: 'bar',
...
This will always create a vertical bar chart. It should be rewritten as follows in order to consider the type provided by the #Input() decorator.
this.bar_chart = new Chart(this.dataCtx, {
type: this.type,
...
Probably this.bar_chart is then no longer an appropriate name and should be amended to avoid future misunderstandings.
Is there any way to change the color of a bar in a barchart base on a returned value from ajax?
This is the code that I am following and modifying.
var stocksDescription = [];
var stocksRemaining = [];
$.ajax({
type : "get",
url : "getDashboardStocksData",
data : {'foo' : 'foo'},
success : function(data){
stocksDescription = data[0];
stocksRemaining = data[1];
var e = document.getElementById("barChartSimpleGradientsNumbers").getContext("2d");
gradientFill = ctx.createLinearGradient(0, 200, 0, 50);
gradientFill.addColorStop(0, "rgba(91, 175, 231, 1)");
gradientFill.addColorStop(1, hexToRGB('#30f033', 0.8));
var a = {
type: "bar",
data: {
labels: stocksDescription,
datasets: [{
label: "Remaining",
backgroundColor: gradientFill,
borderColor: "#30f033",
pointBorderColor: "#FFF",
pointBackgroundColor: "#30f033",
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
borderWidth: 1,
data: stocksRemaining
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
bodySpacing: 4,
mode: "nearest",
intersect: 0,
position: "nearest",
xPadding: 10,
yPadding: 10,
caretPadding: 10
},
responsive: 1,
scales: {
yAxes: [{
gridLines: 0,
gridLines: {
zeroLineColor: "transparent",
drawBorder: false
}
}],
xAxes: [{
display: 0,
gridLines: 0,
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawTicks: false,
display: false,
drawBorder: false
}
}]
},
layout: {
padding: {
left: 0,
right: 0,
top: 15,
bottom: 15
}
}
}
};
var viewsChart = new Chart(e, a);
}
});
The returned data from ajax is from a controller
public function getDashboardStocksData()
{
$stocks = Stocks::all();
$stocksDesciption = array();
$stocksRemaining = array();
foreach ($stocks as $key => $value) {
array_push($stocksDesciption, $stocks[$key]->description);
array_push($stocksRemaining, $stocks[$key]->quantity);
}
$data[0] = $stocksDesciption;
$data[1] = $stocksRemaining;
return $data;
}
the sample returned data :
stocksDescription = ["Stock 1", "Stock 2", "Stock 3", "Stock 4" "Stock 5"];
stocksRemaining = [100, 26, 9, 45, 6];
With this, there is nothing wrong with the code, I just want to change the bar color of that specific stock if the remaining quantity is below 10. I want to make it color red.
The code is fired upon refresh of the page.
var ctx = document.getElementById('myChart');
let dataSet = [100, 26, 9, 45, 6];
let labels = ["Stock 1", "Stock 2", "Stock 3", "Stock 4", "Stock 5"];
let barBg = Array.from({'length': dataSet.length}, (_, i) => dataSet[i] < 10 ? 'red' : 'green');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Stocks',
data: dataSet,
backgroundColor: barBg,
borderColor: barBg,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<canvas id="myChart" width="100" height="50"></canvas>
You can use backgroundColor prop to fill each bar, create a array that hold bar color on the basic of each stock value, where value is less than 10 set color red in array for that particular index.
Question
I'm looking to make 3 points on a graph draggable between 0 and 100. I'm looking to do this in React with ChartJS via react-chartjs-2.
Here is a fiddle with everything setup (js also below).
Extra Info
The fiddle uses some random version of react-chartjs-2 because I couldn't figure out how to import. On my local setup I use import { Line } from 'react-chartjs-2'; but I'm not sure how to do that in jsfiddle. Webdev is super new to me.
What have I tried so far?
I tried using a few chartjs plugins (like this one) that claimed
to do draggable points, but I couldn't figure out how to get them
working in React. This might be the easiest solutin.
I tried adding my own event listeners for mouseDown/Up/Enter/Leave,
but I was unable to attach these to the actual points. If I just have
access to <Line /> is there a way in React for me to attach to the
points themselves? If I could get the coordinates and have these
events, I could kludge together a solution.
I tried searching on the chartjs and react-chartjs-2 docs, but I
couldn't find anything that would let me drag, or attach the right
listeners.
Code
var Line = reactChartjs2.Line;
const options = {
tooltips: {enabled: true},
scales: {
xAxes: [{
gridLines: {display: false, color: 'grey',},
ticks: {fontColor: '#3C3C3C', fontSize: 14,},
}],
yAxes: [{
scaleLabel: {display: true, labelString: 'Color Strength', fontSize: 14,},
ticks: {
display: true,
min: -5,
max: 100,
scaleSteps: 50,
scaleStartValue: -50,
maxTicksLimit: 4,
fontColor: '#9B9B9B',
padding: 30,
callback: point => (point < 0 ? '' : point),
},
gridLines: {
display: false,
offsetGridLines: true,
color: '3C3C3C',
tickMarkLength: 4,
},
}],
},
};
class DraggableGraph extends React.Component {
state = {
dataSet: [0, 0, 0],
labels: ['red', 'green', 'blue'],
};
render() {
const data = {
labels: this.state.labels,
datasets: [{
data: this.state.dataSet,
borderColor: '9B9B9B',
borderWidth: 1,
pointRadius: 10,
pointHoverRadius: 10,
pointBackgroundColor: '#609ACF',
pointBorderWidth: 0,
spanGaps: false,
}],
};
return (
<div>
<Line
data={data}
options={options}
legend={{display: false}}
plugins={{}}
/>
</div>
);
}
}
ReactDOM.render(<DraggableGraph />, document.getElementById('app'));
You can do this by using chartjs-plugin-dragData. You have to set dragData: true within options object to use this plugin in chart js. Here I have provided updated code.
var Line = reactChartjs2.Line;
const options = {
tooltips: {enabled: true},
scales: {
xAxes: [{
gridLines: {display: false, color: 'grey',},
ticks: {fontColor: '#3C3C3C', fontSize: 14,},
}],
yAxes: [{
scaleLabel: {display: true, labelString: 'Color Strength', fontSize: 14,},
ticks: {
display: true,
min: -5,
max: 100,
scaleSteps: 50,
scaleStartValue: -50,
maxTicksLimit: 4,
fontColor: '#9B9B9B',
padding: 30,
callback: point => (point < 0 ? '' : point),
},
gridLines: {
display: false,
offsetGridLines: true,
color: '3C3C3C',
tickMarkLength: 4,
},
}],
},
legend:{
display: false
},
dragData: true,
onDragStart: function (e) {
console.log(e)
},
onDrag: function (e, datasetIndex, index, value) {
console.log(datasetIndex, index, value)
},
onDragEnd: function (e, datasetIndex, index, value) {
console.log(datasetIndex, index, value)
}
};
class DraggableGraph extends React.Component {
state = {
dataSet: [0, 0, 0],
labels: ['red', 'green', 'blue'],
};
render() {
const data = {
labels: this.state.labels,
datasets: [{
data: this.state.dataSet,
borderColor: '9B9B9B',
borderWidth: 1,
pointRadius: 10,
pointHoverRadius: 10,
pointBackgroundColor: '#609ACF',
pointBorderWidth: 0,
spanGaps: false,
}],
};
return (
<div>
<Line
data={data}
options={options}
/>
</div>
);
}
}
ReactDOM.render(<DraggableGraph />, document.getElementById('app'));
https://jsfiddle.net/4mdenzjx/