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'
=)
Related
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
Using the Ember addon ember-bootstrap I can make a set of radio buttons like this :
{{form.element controlType="radio" label="Fruit Type" property="radio" options=radioOptions optionLabelPath="label"}}
with a Controller that looks like this :
export default Controller.extend({
init() {
this._super(...arguments);
this.radioOptions = [
{
label: 'Citrus',
value: 'C',
inline: true
},
{
label: 'Non-Citrus',
value: 'N',
inline: true
}
];
}
});
The relevant doco is here https://www.ember-bootstrap.com/#/components/forms .
However what I can't do is provide a custom value to each radio button so that I end up with rendered HTML like this :
<label>Citrus</label>
<input type="radio" value="C">
<label>Non-Citrus</label>
<input type="radio" value="N">
I have looked at "Custom Controls" on https://www.ember-bootstrap.com/#/components/forms but I can't see how that applies to this case.
EDIT: Just to be clearer about why I want to do this I want to display the readable label (eg "Citrus") but have the non-readable value ("C") available to send back to the server (because the server thinks in terms of "C" or "N".
It's not essential I could send "Citrus" back and map it around on the server but I just thought this would be very straightforward.
Looking at the part of the doco starting with "You can also just customize the existing control component:" on https://www.ember-bootstrap.com/#/components/forms it does seem like you should be able to do the sort of thing I'm after but the example shown doesn't address the use of a value attribute and I can't figure out how to .
You don't need to have the HTML rendered like that. if you want to access the checked radio, simply it is the property name dot value like radio.value.
Here how to get it in the on submit action:
actions: {
onSubmit() {
alert(this.radio.value)
}
}
I had exactly the same issue but I finally solved it. You have to use form.element in block mode. Why is it also necessary to also write an action to update the value? I have no idea!
In my implementation, I'm using Ember changesets and my property is called usageType. I hope it's clear enough to adapt for your needs.
I'm also using Ember Truth Helpers, which is what the {{eq opt.value el.value}} part is. It sets checked to true if the input value is equal to the current-selected value.
# my-component.js
actions: {
selectUsageType(option) {
return this.set('changeset.usageType', option);
}
}
# usage-type-options.js (imported in component JS)
[{
label: 'First label',
value: 'A'
},
{
label: 'Second label',
value: 'B'
}]
# Etc.
# my-component.hbs
# I'm not using angle-bracket invovation here, oops
{{#form.element
property="usageType"
label="My label" as |el|
}}
{{#each usageTypeOptions as |opt|}}
<div class="form-check">
<input
type="radio"
class="form-check-input"
id="{{el.id}}-{{opt.value}}"
checked={{eq opt.value el.value}}
onchange={{action "selectUsageType" opt.value}}
>
<label for="{{el.id}}-{{opt.value}}" class="form-check-label">
{{opt.label}}
</label>
</div>
{{/each}}
{{/form.element}}
I am using chart.js to render data passed from a Django view. I have various types of charts all working well, EXCEPT when my chart title includes as apostrophe.
For example, the title: My child's learning gets displayed as: My child's learning
The code below shows how I use the title which is the variable chart_row.heading_2 passed from the Django view
options: {
title: {
display: true,
text: '{{ chart_row.heading_2 }}'
}
}
The title works in all other instances where there is no apostrophe.
Is there any workaround to this?
OK, I found the answer was to use escapejs:
text: '{{ chart_row.heading_2|escapejs }}'
From the doc: Django built-in template tags
Try rendering the title as safe.
options: {
title: {
display: true,
text: '{{ chart_row.heading_2|safe }}'
}
}
So I am trying to display a nice chart using Chart.js inside a Vue.js component... Should not be so complicated but I am hitting a wall there.
Here is my component code (syntax is based on Vue.js webpack boilerplate)
<template>
<canvas v-el:canvas style="width: 100%; height: 200px"></canvas>
</template>
<script>
import Chart from 'chart.js'
export default {
compiled: function () {
// fetch canvas DOM element
let canvas = this.$els.canvas
// init chart.js
let chart = new Chart(canvas, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
console.log(chart)
}
}
</script>
I simplified the component as much as I could, and used data from the doc example (will bind real data using props later).
So I keep getting this error in the console :
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
I looked it up, it seems that this has something to do with the variable passed to getComputedStyle used in Vue.js.
My best guess would be that this.$els.canvas does not return the right object. But if I output it in the console using console.log it seems right.
console.log(canvas)
// outputs <canvas style="width: 300px; height: 150px;"></canvas>
console.log(canvas.tagName)
// outputs CANVAS
console.log(canvas.style.height)
// outputs 200px
Hmmm this is actually weird and could be helpful : did you notice that I set the canvas style.height in the template, but if I do console.log(canvas) I see height: 150px but if console.log(canvas.style.height) 2 lines below, I get 200px as an output ?!! WTF is going on ?.. Vue is messing with my head right now
Link to jsFiddle for you to play with (check out the result in the console)
https://jsfiddle.net/kartsims/g8s12yd2/3/#&togetherjs=CQrzT996AR
I figured out why and will let you know, just in case someone happens to be in the same position :
I couldn't get this to work inside a vue component displayed by Vue Router... I figured that it was because I should have used ready hook instead of compiled... At compiled, the DOM is not fully ready yet.
I am having a very strange problem with Ember that I haven't had before. The scenario is quite a lot more complicated than I can outline here so I'll do my best to give a simplified version below.
I have a component which dynamically renders forms from a schema Ember.object(). Something like the below stored as formSchema on the component, where md-text-input is a normal text input field:
[
{
component: "md-text-input",
value: "some value here",
label: "Text input"
},
{
component: "md-number-input",
value: "9",
label: "Number input"
}
]
The component template then looks like:
{{#each formSchema as |field|}}
{{field.value}}
{{component field.type value=field.value label=field.label}}
{{/each}}
The formSchema object is changed in the component which causes the form displayed to change.
The first form that renders, the binding works correctly and typing in the input field will update the {{field.value}}. However, once the formSchema updates the binding no longer works and although the input field shows the initial value, typing into it will not update field.value.
Any help is greatly appreciated as I can't seem to get my head around why Ember is losing this binding.
Thanks in advance!