I have tried to make the labels for both datasets in the chart.js found here.
example of chart.js to appear when hovering over the different days in the chart
I have tried to add this...
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
}
}
Bu that does not help, in a perfect world I would like to display it like 28 (30) when hovering over SUNDAY. Can somebody help out please?
Since you dont use the build in tooltip to display those values setting tooltip modes dont matter.
To get what you want just put the values in the same span the way you like so you would get this:
<div class="tick">
SUN
<span class="value value--this">28 (30)</span>
</div>
https://codepen.io/leelenaleee/pen/OJjOamw
Related
Line is not rendering correctly. It's rendering as instead of
My code is as follows:
LineGraph.js:
import React from 'react'
import {Line} from 'react-chartjs-2';
function Linegraph() {
return (
<div className="linegraph">
<Line
data={{
datasets:[{
type:"line",
data:[{x:10,y:20},{x:15,y:10},{x:12,y:4}],
backgroundColor:"black",
borderColor:'#5AC53B',
borderWidth:2,
pointBorderColor:'rgba(0,0,0,0)',
pointBackgroundColor:'rgba(0,0,0,0)',
pointHoverBackgroundColor:'#5AC53B',
pointHoverBorderColor:"#000000",
pointHoverBorderWidth:4,
pointHoverRadius:6,
}]
}}
/>
</div>
)
}
export default Linegraph
I'm following a tutorial here and at 1:33:17 they were successfully able to implement it while mine remained as the vertical line going straight down.
Here's also a screenshot of my project set-up:
Your help is greatly appreciated!
You could change the chart type to 'scatter' and add the property drawLine: true to the dataset.
datasets:[{
type: "scatter",
drawLine: true,
data:[{x:10,y:20},{x:15,y:10},{x:12,y:4}],
...
The Chart.js documentation states that scatter charts are based on basic line charts with the x axis changed to a linear axis.
Therefore, assuming you're using react-chartjs-2 together with Chart.js v3, you may also keep type: 'line' but will have to define the x-axis as type: 'linear' as follows:
data={{
type: "line",
...
}}
options={{
scales: {
x: {
type: "linear"
}
}
}}
We ended up getting this to work by going inside package.json and setting the following versions:
'chart.js':'^2.9.4',
'react-chartjs-2':'^2.11.1'
=)
I am using Doughnut chart of chart.js in a react js application. I would need the same look and feel for the legend than illustrated by:.
I have gone through the Chart.js documentation but I am helpless!
You have to add this at options, see next:
options: {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 10
}
}
}
https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration here you can see all options what you can add to labels, see padding also, default is 10 you need only add boxWidth.
I am using Zurb-foundation 5 Joyride for a tour guide. It has been pretty helpful. I have a div split into few vertical divs. I was trying to display an info for each vertical div but those tips are coming at the bottom/ top instead of coming at right/ left.
demo
http://codepen.io/chetang/full/pAvmf/
The docs aren't clear on how to achieve it. Any suggestions!!
You will need to define the location patterns in joyride before using them as shown below.
$(document).foundation({
joyride : {
tip_location: 'top',
nub_position: 'auto',
tip_location_patterns : {
top: ['top'],
bottom: [], // bottom should not need to be repositioned
left: ['right', 'top', 'bottom'],
right: ['left', 'top', 'bottom']
},
}
});
For more clarity Visit http://codepen.io/Parteek/pen/ohHlc.
Any ways to change the legend font size in raphael.js for making pie chart (g.raphael.js, g.pie.js)? I've found similar question here but there's no working solution for me. So anyone has any idea about it then share please.
You can do that by adding in your legend the following:
legend:
{
...
labelFont: '10px Tahoma'
},
Hope this helped ;)
Also, for pies try
label: { font: '12px Tahoma' }
I have a question about Google Chart API.
I'm working on Bar Chart to show a stacked bar graph.
Here's a problem that legend texts are duplicated as shown in the image below.
I set an option like this.
var options = {
isStacked: true,
legend: {position:'bottom'},
backgroundColor: {fill:'#f5f5f5'},
width: 350,
colors:['#32bb32','#06abe8','#ffcb05','#f15a22']
};
Do you have any idea?
Messing about with google charts can get a bit, well, messy. A terrible solution that happens to get the job done is to insert an excessive number of white spaces after your label, then increase the font size under text style like so:
legend: { position: 'bottom', alignment: 'center', textStyle: { fontSize: 15,}},
This is a quick and dirty solution to annoying overlapping in the legend.
With google charts, nearly all problems can be fixed using custom templates, but this solution will hold if you just want to wash your hands of the problem and move on.