I have tried to make a pie chart using react-chartjs 2, It is working fine in desktop view but in mobile view the legend is not responsive it is taking much space and due to this the size of pie chart become very small.
my code:
function Chart(props: any) {
const option = {
tooltips: {enter image description here
callbacks: {
label: function (tooltipItem: any, data: any) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var meta = dataset._meta[Object.keys(dataset._meta)[0]];
var total = meta.total;
var currentValue = dataset.data[tooltipItem.index];
var percentage = parseFloat(
((currentValue / total) * 100).toFixed(1)
);
return currentValue + " (" + percentage + "%)";
},
title: function (tooltipItem: any, data: any) {
return data.labels[tooltipItem[0].index];
},
},
},
legend: {
display: true,
labels: {
fontSize: 12,
},
position: "right",
},
};
return (
<div className="chart">
<Pie data={props.ChartData} options={option} />
</div>
);
You can set your fontSize object as a ternery operator that checks the widts (or something else) to see if you are on a mobile device and give back the right fontSize according to it
If you want to update it real time because screen sizes change you can do that by mutating the chart options itself in a resizeEvent listner
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
legend: {
labels: {
fontSize: window.innerWidth > 350 ? 20 : 10
}
},
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
window.addEventListener('resize', () => {
if (window.innerWidth < 350) {
chart.options.legend.labels.fontSize = 10;
} else {
chart.options.legend.labels.fontSize = 20
}
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
Here is the way to have a responsive legend font size (also explained here)
options: {
plugins: {
legend: {
labels: {
// This more specific font property overrides the global property
font: {
size: 14
}
}
}
}
}
https://codepen.io/qkreltms/pen/BaaWZeV?editors=0010
I've tried making crosshair when hover on points:
But there are some bugs
Crosshair appears when mouse hover on the almost exactly middle on the points, not any position on points.
Crosshair border keeps thicker when mouse points moves middle on the points.
Any ideas?
Code :
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
}
};
const test = [5, 9, 10, 9, 18, 19, 20];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: test,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: test,
}]
},
options: {
onHover: function(event) {
const chart = myChart.getElementAtEvent(event)[0]._chart;
const activeElements = myChart.getElementsAtEvent(event);
console.log(chart)
if (activeElements.length) {
const activePoint = activeElements[0];
const ctx = chart.ctx;
if (!ctx) {
return;
}
const x = activePoint._view.x;
const y = activePoint._view.y;
const leftX = chart.chartArea.left;
const topY = chart.chartArea.top;
const RightX = chart.chartArea.right;
const bottomY = chart.chartArea.bottom;
ctx.beginPath();
// ctx.setLineDash([5, 15]);
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.moveTo(leftX, y);
ctx.lineTo(RightX, y);
ctx.lineWidth = 1;
ctx.strokeStyle = "#C2C7CC";
ctx.stroke();
ctx.closePath();
}
},
responsive: false,
scales: {
},
animation: {
duration: 750,
},
}
});
I am working ChartJS component using angular2. I would like to know whether there is any way to render as this image or not.
Basically, The Bar Chart rendered on the grid. When I click on the column bar, for example, June the horizontal line should be displayed with the up arrow at the exact month under the column bar. Do you have any suggestions? Thanks in advance.
You can capture the onclick event of the canvas and check which bar has been clicked with the getElementAtEvent method of chartjs. getElementAtEvent gives you all the relevant information you need (chart-width, x-coordinate of the bar, label etc.) to draw a custom line below the chart.
canvas.onclick = function (evt) {
var activePoints = myBarChart.getElementAtEvent(evt);
if (activePoints[0]) {
//draw your custom line
}
};
The snippet below has two canvas. One for chart.js to draw the actual chart and the second below to draw a line with the text of the clicked label.
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55, 40],
}]
};
var option = {
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
canvas.onclick = function (evt) {
var activePoints = myBarChart.getElementAtEvent(evt);
if (activePoints[0]) {
var chart = activePoints[0]._chart;
var canvasX = document.getElementById('xAxis2');
// set the width of the second canvas to the chart width
canvasX.width = chart.width;
var canvas2D = canvasX.getContext('2d');
// draw the line
canvas2D.moveTo(0, 20);
canvas2D.lineTo(activePoints[0]._view.x - 10, 20);
canvas2D.lineTo(activePoints[0]._view.x, 0);
canvas2D.lineTo(activePoints[0]._view.x + 10, 20);
canvas2D.lineTo(canvasX.width, 20);
canvas2D.stroke();
// add the label text
canvas2D.font = '12px serif';
canvas2D.fillText('for ' + activePoints[0]._view.label, canvasX.width - 100, 15);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
<canvas id="xAxis2" height="20"></canvas>
I'm having an issue where the last bubble in my chart cuts off. I need a way of extending the chart so that the entire circle is displayed. I've tried everything from adding an extra value to the end, to adjusting padding. Nothing seems to work. Unfortunately, the Chart JS documention on bubble charts is severely lacking as well.
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function() {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};
var bubbleChartData = {
animation: {
duration: 10000
},
datasets: [{
label: "My First dataset",
backgroundColor: randomColor(),
data: [
{
x: 10,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 20,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 30,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 40,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 50,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 60,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 70,
y: 0,
r: 30,
}]
}]
};
var ctx = document.getElementById('Chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bubble',
data: bubbleChartData
})
JSFiddle: https://jsfiddle.net/3dog0bec/
I solved this issue by modifying the xAxes ticks min and max. This worked because I have a set number of data to display, so I simply set the values to 10 less than the first data point and 10 more than the last.
var chart = new Chart(ctx, {
type: 'bubble',
data: bubbleChartData,
options: {
scales: {
xAxes: [
{
ticks: {
min: -10,
max: 100
}
}]
}
}
});
I am creating a dashboard that queries a published google spreadsheet as the dataTable. The charts (column, table, and candlestick) show up just fine. However, I have added a listener event for 'sort' on the table and would like this to sort the corresponding data in the column and candlestick charts. However, when I sort the table by clicking on the header, the charts show the following error in red:
"All data columns of the same series must be of the same data type".
My spreadsheet contains a string for the first column and numbers for the other columns. However, I assume that I am getting this error message because the query is not returning the data as 'string' in the first column and 'number' in the other columns. Can I specify this? If so, how? Thanks.
EDIT: Here is my code...the addListener event at the bottom is causing the issue:
var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AukymWvA6LlzdHpwblVtSmU3ZXJOMGhUVFZiV3NnSkE&single=true&gid=0&output=html');
query.setQuery('SELECT A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// CategoryFilter for Grade
var gradeFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'gradeFilter_div',
options: {
filterColumnIndex: 3
}
});
// CategoryFilter for School
var schoolFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'schoolFilter_div',
options: {
filterColumnIndex: 16
}
});
// CategoryFilter for Teacher
var teacherFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'teacherFilter_div',
options: {
filterColumnIndex: 17
}
});
// CategoryFilter for Entity
var entityFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'entityFilter_div',
options: {
filterColumnIndex: 18
}
});
var numberSlider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'rNumberRangeFilter_div',
options: {
filterColumnIndex: 19
}
});
// create a Table visualization
var rBubbleChart = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'rBubble_div',
options: {
title: 'Comparison of Percentiles',
height: 500,
width: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
backgroundColor: 'transparent',
bubble: {opacity: 0.6, stroke: 'transparent', textStyle: {fontSize: 8, color: 'transparent'}},
hAxis: {minValue: 0, maxValue: 100, gridlines: {count: 11, color: '#EEEEEE'}, title: '2013 Percentile', titleTextStyle: {fontSize:10}, textStyle: {fontSize:10}},
vAxis: {minValue: 0, maxValue: 100, gridlines: {count: 11, color: '#EEEEEE'}, title: '2014 Percentile', titleTextStyle: {fontSize:10}, textStyle: {fontSize:10}},
colors: ['#a4c2f4','#89B0F0','#6d9eeb','#558BE2','#3c78d8','#2767D2','#1155cc'],
legend: {position: 'in', alignment: 'center', textStyle: {fontSize:10}},
animation: {duration:1500, easing:'out'},
sizeAxis: {minSize: 2, minValue: 5, maxSize: 30, maxValue: 500}
},
view: {columns: [0, 1, 2, 3, 4]}
});
//Draw chart with y=x line
var hackChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'hack_chart_div',
dataTable: [['x', 'y'],[0, 0], [100, 100]],
options: {
height: 500,
width: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
hAxis: {minValue: 0, maxValue: 100, textPosition: 'none', gridlines: {count: 0}, baselineColor: 'none'},
vAxis: {minValue: 0, maxValue: 100, textPosition: 'none', gridlines: {count: 0}, baselineColor: 'none'},
colors: ['black'],
pointSize: 0,
lineWidth: 1,
enableInteractivity: false,
legend: {position: 'none'},
}
});
hackChart.draw();
var rCandlestickChart = new google.visualization.ChartWrapper({
chartType: 'CandlestickChart',
containerId: 'rCandle_div',
options: {
title: 'Distribution of Performance (Interquartile Range)',
height: 250,
width: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"60%"},
hAxis: {textStyle: {fontSize:10}},
vAxis: {minValue: 0, maxValue: 100, title: 'Percentile', titleTextStyle: {fontSize:10}, textStyle: {fontSize:10}},
legend: {position: 'in'},
animation: {duration:1500, easing:'out'},
colors: ['#a4c2f4','#3c78d8']
},
view: {columns:[5, 6, 7, 8, 9, 10, 11, 12, 13]}
});
var rColumnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'rColumn_div',
options: {
title: 'Percent Satisfactory',
height: 250,
width: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"60%"},
hAxis: {textStyle: {fontSize:10}},
vAxis: {minValue: 0, maxValue: 100, title: '% Satisfactory', titleTextStyle: {fontSize:10}, textStyle: {fontSize:10}},
legend: {position: 'in'},
animation: {duration:1500, easing:'out'},
colors: ['#a4c2f4','#3c78d8']
},
view: {columns:[5, 14, 15]}
});
var rTableChart = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'rTable_div',
options: {
width: '300px',
height: '500px',
allowHtml: true,
cssClassNames: {tableCell: 'styleRows', headerRow: 'styleHeader'}
},
view: {columns: [16, 5, 19]}
});
var formatter = new google.visualization.BarFormat({width: 100, drawZeroLine: true, min: -20, max: 20});
formatter.format(data, 19);
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
bind(entityFilter, [rBubbleChart, rCandlestickChart, rColumnChart, rTableChart]).
bind(schoolFilter, gradeFilter).bind(gradeFilter, teacherFilter).
bind(teacherFilter, [rBubbleChart, rCandlestickChart, rColumnChart, rTableChart]).
bind(numberSlider, [rBubbleChart, rCandlestickChart, rColumnChart, rTableChart]).
draw(data);
google.visualization.events.addListener(rTableChart, 'ready', function() {
google.visualization.events.addListener(rTableChart.getChart(), 'sort', function(event) {
data.sort([{column: event.column, desc: !event.ascending}]);
boxchartObject = rCandlestickChart.getChart();
boxchartObject.draw(data);
columnChartObject = rColumnChart.getChart();
columnChartObject.draw(data);
});
});
The problem is in the way you redraw the charts. By calling the ChartWrapper#getChart#draw method, you are bypassing all of the ChartWrapper's parameters - including the view parameter which specifies the columns to use. This is why you get the data type error. You need to redraw the Dashboard (to avoid a clash between the sorting and the filters). Use this:
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
google.visualization.events.addListener(rTableChart, 'ready', function() {
google.visualization.events.addListener(rTableChart.getChart(), 'sort', function(event) {
// set the sorting options in the table so they are preserved on redraw
rTableChart.setOption('sortColumn', event.column);
rTableChart.setOption('sortAscending', event.ascending);
// convert the Table view column to a DataTable column
var col = rTableChart.getView().columns[event.column];
// sort the DataTable
data.sort([{column: col, desc: !event.ascending}]);
// redraw the dashboard
dashboard.draw(data);
});
});
dashboard.bind(schoolFilter, gradeFilter)
.bind(gradeFilter, teacherFilter)
.bind([entityFilter, teacherFilter, numberSlider], [rBubbleChart, rCandlestickChart, rColumnChart, rTableChart])
.draw(data);
To ensure that the sort event handler is set up properly, you should set up the Table wrapper's ready event before calling the Dashboard's draw method.
Update working example: http://jsfiddle.net/asgallant/t5rkJ/4/