Chartjs - tooltip - different corner radius - javascript

As in documentation, to change cornerRadius of tooltips
tooltips: {
cornerRadius: 10
}
But i need to change one corner in different way than the others ( like in css -> border-top-left-radius: 10px )
example image
Is it even possible ?

ChartJS (actual version 3.5.0) doesn't offer a way to specify a different cornerRadius for every corners. For setting different values for border radius of a tooltip you can enable external tooltips in the global or chart configuration and use your custom CSS code for that purpose. Speaking about the native ChartJS code, I recently filed an issue on their GitHub repository to discuss the implementation of this new feature. There you will find the code that allows the kind of functionality you are asking for. It involves changing just a few lines of code in a single function. Hope to have been of help for the community and for ChartJS users like you that need a cornerRadius object
{topLeft: 50, topRight: 50, bottomLeft: 0, bottomRight: 0}
instead of a single value to customize the chart tooltip.

Related

Highcharts move xAxis down / off of chart

I am working on legacy code from a previous developer and they used highcharts.js (v3.0.1). The xAxis is landing within the graph (screenshot) and I can't sort out why this is. I tried to recreate this in jsfiddle but I can't get that axis to move. I thought that maybe it was a bug in the version but I can't get it to replicate so I'm thinking that is has to be something within the sites own CSS that is manipulating it, however, it's built with g, rect, and text tags which I don't see in any of the custom CSS files.
I've looked through other Highchart.js posts on here but I haven't seen this issue posted yet. Does anyone know what I'm missing?
EDIT: I forgot to mention this but all the usernames are centered text-center
Check exactly how xAxis labels are aligned. As I can see they are rotated vertically so it is important to set appropriate labels align property:
xAxis: {
categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
labels: {
align: 'left',
rotation: 90
}
}
Demo:
- labels align center: https://jsfiddle.net/wchmiel/29b4qejc/
- labels align left: https://jsfiddle.net/wchmiel/56evyrxj/
Api reference:
https://api.highcharts.com/highcharts/xAxis.labels.align
are you use the labels padding ?
https://api.highcharts.com/highcharts/xAxis.labels.padding
Be sure that the number is greater than 0.

How to show overlapping in various columns of highcharts column range graph

I have a requirement to display an event based calendar. However, there are almost no functionalities related to calendar and its just a graphical representation of events throughout a year. Hence I have planned to use HighCharts columnrange graph. This saves me a lot of boilerplate for event listening.
However, when I get several overlapping events, its hard for me to show them as distinct.
How can I use highcharts existing features to accomplish this.
I have looked for style properties in events. But couldn't found anything helpful.
I tried searching if highcharts provides any form of gradient's implementation, but I didn't get much help there either.
I tried giving color with an opacity as rgb(r,g,b, 0.2) but somehow this gets turn to black.
Here is my working demo. In this chart event8 and event7 are overlapping. There exact time duration is similar to event 9 and event 10 respectively.
I found a similar question here, but this question talks of vertical overlapping while I need to distinguish horizontal overlapping (as shown in demo). Also I tried the answer given here, which had no affect.
Can someone suggest the way to achieve it ?
I think that good idea is to use partially-transparent colors for your columns. To use transparent colors you should use rgba, not rgb parameter.
Here you can find code that may help you:
data: [{
name: 'event7',
x: 1,
low: 36,
high: 43,
color: "red"
}, {
name: 'event8',
x: 1,
low: 25,
high: 38,
color: "rgba(100,100,100,0.6)"
}]
And here you can find live example how it can work:
http://jsfiddle.net/ay1Lk2yw/4/

How to increase label padding in the nodes of a Vis.js network graph?

When creating network graphs with Vis.js, the nodes in the network are drawn with labels that - for my use case - don't have enough 'padding', i.e., there is not enough space between the node label text and the border of the node. The following pic illustrates it:
Considering the vast amount of config options already available in Vis.js, I thought increasing label padding would be simple, but for the life of me, can't figure out how to do it. Have gone through the official docs, and have searched through StackOverflow and Google, but found no hints. Feel like I'm missing something obvious - can anyone shed a light?...
I found it - at least it's working for vis#4.20.1 which i installed with npm. They use margin to modify the space between the border and the label text.
The options object you pass in, it needs a margin property on the nodes property like this:
const options = {
nodes: {
margin: 10
}
}
You can also specify different margins for top, bottom, right, left like this:
const options = {
nodes: {
margin: {
top: 10,
bottom: 20,
left: 5,
right: 5
}
}
I can't seem to specify in anything but px - i tried to use '1em' for input, but it seems it only takes integer values - and expresses it in pixels.
In case you're curious, i found the information i needed from the options.js file located in node_modules\vis\lib\network. If you're looking for options for the other areas of vis (like timeline), i bet there is an options file for that in a similar folder.
This property is not yet customizable, however I managed to change it directly in the vis.js source file:
Search for the Box class definition : var Box = function (_NodeBase)
In the resize function there is the margin to modify : var margin = 5;
Change it to whatever you want, and it's done
I've been just hitting the same problem. The only solution I found was to set borderWidth and borderWidthSelected of the node to the amount of padding I wanted. To make it not look too ugly, you can also set the border the same color as the background of the node.
Besides, it gives the graph a nice modern flat look.

Change 'points' on a line chart to donuts using Chart.js

I'm looking to customize the point on Chart.js's Line Chart a little more. What I would like is to be able to set a 'border-radius' on those points instead of a solid circle. That way, the points would show up more as donuts. (Border with a hollow/white/colored center).
Is there a way of doing this built-in? If not- is there a way to extend the LineChart function to allow this?
The easiest way I was thinking would be able to just set the PointStrokeWidth to some value greater than 1. Obviously that's not an option, but that's closer to what I'm looking for.
If possible, I would like to be able to customize 'all' of the line widths, instead of having lines all be 1px.
Ah, I seem to have overlooked the option in the documentation. For future readers:
pointDotStrokeWidth: 1 will set the points. There is also datasetStrokeWidth: 2. Also, strokeColor: '#fff' actually uses Canvas' strokeStyle method, so you can use gradients and such to style those, if needed.

Is it possible to rezise the graph dots in the jquery library flot when being hovered?

when working with the jquery library flot (like this), you might want increase precision when hovering over he dots, so my question is if there is any way of making this area of whitin a dot is hovarable bigger?
Use the radius property of the series hash you pass to the $.plot function to set the radius of the clickable data point on the chart. So instead of this as it is now:
points: { show: true }
change it to, say, this:
points: { show: true, radius: 6 }
The measurement is in pixels and the default radius is 3 pixels. Personally speaking I wouldn't go much above that if the data points are close together like in the example chart: you run into the opposite problem where all the points overlap and run into each other.

Categories

Resources