In our Angular application we are using Highcharts. In that we are showing xAxis labeles as below
When the number of items are more and we have long text, we are showing part of the text and want to show tooltip/tilte on hover like below.
I tried something like below:
this.chartOptions.xAxis['labels'].events.mouseover = (e) => {
e.chart.renderer.label("tooltip text", e.x, e.y, 'rectangle').css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 4,
})
.add()
.toFront();
}
But, here the problem is the event does not have any renderer in it. So, not able to add the custom label.
I have also tried multiple ways using axisTitle, formatter etc.. (Please check this link for reference)
Please help me solve this problem.
Thanks...
Use a basic function instead of an arrow one and refer to a chart by this keyword:
mouseover: function(e) {
this.chart.renderer.label("tooltip text", e.x, e.y, 'rectangle').css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 4,
})
.add()
.toFront();
}
Live demo: http://jsfiddle.net/BlackLabel/dfazcwyr/
Related
i have a little problem with my Symfony/ChartJS Application.
So if i create a Chart with JS like var myChart = new Chart.. and so on, i can easily destroy the Chart with myChart.destory(); because i can address the ChartObject.
My Problem:
The first Chart i Render with my SymfonyController. So i render the chart in my Controller with
return $this->render('category.html.twig', [
'chart' => $chart]);
In Twig i assign an ID to the Chart {{ render_chart(chart, {'id': 'my-chart'}) }}.
But i dont really know how i can adress the whole Chartobject in Js. So how i can destroy the Chart i created with my Symfonycontroller? Anyone have a suggestion?
Thank you in advance!
//EDIT
The normal way with const chart = Chart.getChart('my-chart'); don't work either. Here is my Canvas-ConsoleLog for more information:
<canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="(i deleted the values for better legibility)" id="my-chart" style="display: block; box-sizing: border-box; height: 407.778px; width: 816.667px;" width="735" height="367"></canvas>
The strange thing:
when i try the log: console.log(document.getElementById("my-chart").getContext("2d");); it shows:
CanvasRenderingContext2D {canvas: canvas#my-chart, globalAlpha: 1, globalCompositeOperation: 'source-over', filter: 'none', imageSmoothingEnabled: true, …}
canvas: canvas#my-chart
direction: "ltr"
fillStyle: "#000000"
filter: "none"
font: "12px \"Helvetica Neue\", Helvetica, Arial, sans-serif"
globalAlpha: 1
globalCompositeOperation: "source-over"
imageSmoothingEnabled: true
imageSmoothingQuality: "low"
lineCap: "butt"
lineDashOffset: 0
lineJoin: "miter"
lineWidth: 1
miterLimit: 10
shadowBlur: 0
shadowColor: "rgba(0, 0, 0, 0)"
shadowOffsetX: 0
shadowOffsetY: 0
strokeStyle: "#000000"
textAlign: "start"
textBaseline: "alphabetic"
[[Prototype]]: CanvasRenderingContext2D
so the log shows that the chart is recognized...
symfny-ux controller creates its own instance of ChartJS inside an appropriate stimulus-controller, and this variable isn't directly accessible. But, symfony/ux developers are smart, and they created events (e.g. chartjs:connect) which you can listen to (link)
If you do so, you will end up with a JS native CustomEvent object and in the details property of this event you will find passed chart instance previously created in symfiny-ux-controller for chart.js
So in theory you would be able just to
document.addEventListener("chartjs:connect",(chartEv) => {
console.log(chartEv.details); // chartEv.details.chart.destroy()
});
I do recommend you to watch Ryan's tutorial on Symfony UX, especially "Extending a UX Controller" chapter where he tries to work with previously created instance of new Chart() like in your case.
You can use the getChart api method chart.js exposes on itself.
So when you know the ID of your canvas you can use this js to get the chart object:
const chart = Chart.getChart('my-chart');
How to combine images and text with fabricjs and edit text when double clicking the combined object,
Still combine after editing text,
Please tell me how to edit text when rendering image and text combinations
const canvas = new fabric.Canvas("canvas");
// a rect
const rect = new fabric.Rect({
stroke: "#000",
strokeWidth: 1,
fill: "#ccc",
left: 170,
top: 80,
width: 50,
height: 50
});
// a text for describe rect
const text = new fabric.IText("describe rect", {
fontFamily: "Comic Sans",
fontSize: 14,
stroke: "#000",
strokeWidth: 1,
fill: "#000",
left: 170,
top: 80
});
// 1 Combine the above two things but can not edit text
// 2 use LabeledRect also
Based on your requirements, you can
Create a subclass of Image class (or whatever object that you need to attach a label to)
Make it create an instance of IText or Textbox and save an internal reference to it
By hooking into the event handlers on the image (e.g. double click), manually manage the events of the text. Make sure to keep the position and dimensions of the text updated when the image is modified.
Take a look at this answer: Resize Fabric Rect without resizing Textbox. It does something very similar to what you've described.
I am trying to set a background Color to an IText Object from Fabric.js and have encoutered two problems:
Is it possible to set a linear Gradient to the Backgroundcolor of text somehow?
Is it possible to have some padding withing the background colored Part of the text
Thanks for the answers!
I am pretty sure what you are asking is not possible, It is no where mentioned on their documentation, Here's an alternative to your problem
Instead of adding a background to text, you can create a rectangle object and add fill it with gradient, you can refer to fabric js documentation for more on gradients
http://fabricjs.com/fabric-intro-part-2#gradients
You can then add the text over the rectangle object, I have added a example
The padding inside will then just be the width and height of the rectangle which you can easily adjust.
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c1');
var text = new fabric.IText("Bharat\nasdsa\nasdasda\nnn\nklssd", {
fontFamily: 'Courier New',
left: 20,
top: 20,
fontSize: 26,
fill: '#fff'
});
var rect = new fabric.Rect({
width: 200,
height: 200,
fill: '#ffcc12',
opacity: 1
});
rect.setGradient('fill', {
x1: 0,
y1: 0,
x2: rect.width,
y2: 0,
colorStops: {
0: "red",
0.2: "orange",
0.4: "yellow",
0.6: "green",
0.8: "blue",
1: "purple"
}
});
var group = new fabric.Group([rect, text]);
canvas.add(group);
canvas.centerObject(group);
canvas {
border: 1px solid #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.6/fabric.min.js"></script>
<canvas id="c1" width="300" height="300"></canvas>
The solution that worked for me and allows to edit the text is the following
Group Rectangle with background as in abdulmoeez answer
Then watch if this group is selected, if it is selected un-group it and set selected element to the text, so that it is editable.
If user has finished editing the text, re-render it with fitting border and regroup
I'm new with charts, so I have created a google charts lines, and I need to change background color for some range as seen in the picture below.
my code so far is pretty basic and looks like this:
var options = {
vAxis: {
viewWindow: {
min: 0,
max: 100
},
ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
}
};
how can I change background color for example from 0 to 20 in my vAxis to look like this
After some intensive research, I found the solution that lies on this link Google line chart(interactive) api - how we fill different background colors on specified areas
I started to learn C3.js. It is pretty good to work with.
I got stuck in this part, I hope anyone can help me to go forward .
How to create circle in outer of circle in line chart using c3.js .
This is my example code
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 150, 150, 250],
['data12', 30, 200, 100, 150, 150, 250]
],
type: 'line'
},
});
It is giving one small circle ( Dot kind of ) but I want to create one more circle with different color and inside of that circle I need to show this small circle (Dot Kind of ) .
How to do that?
I have tried to select all circle and apply border for that .I have tried like this
d3.selectAll('circle').each(function(){
this.style('border-radius: 20px;');
});
this is wrong way, also this is not working. How to do that ?
Is it possible in c3.js?
You can set the size of your point using chart options
...
point: {
r: 20
}
...
and you can draw a border by using CSS
#chart .c3-circle {
stroke: black;
stroke-width: 4;
}
(assuming you are drawing the chart in a container with ID chart)
Fiddle - http://jsfiddle.net/yhz8k5k9/