How to make a black-and-red line in highcharts - javascript

I am using the Highcharts plugin to make graphs for a production area I am computerizing.
I made a jsFiddle of a sample graph:
http://jsfiddle.net/ericfarrow/j3s1xphu/1/
Now, as you can see in this line it is all just one solid blue line.
What I am being requsted by my users is to have:
a) Line color to be black for an UP inclination
b) Line color to be red for a DOWN inclination
Obviously I can change the default color for the line to black - however that doesn't really resolve it either.
I checked all the Highcharts docs and could not find a simple way to have the line dynamically change from one color to a different color depending on the UP/DOWN value of the line.
Anybody have any ideas on this?
Or maybe a different plugin that would provide this functionality?
Thank you.

There is not a direct way to do this.
The traditional method has been to use two different series, as here:
series: [{
id:'up',
index:0,
name: 'Phil',
color:'rgb(0,0,0)',
marker: { enabled: false },
data: [[0,100.0], [1,800.0],[1.5,null], [2,400.5], [3,1200.5], [4,1450.2], [5,1805.0],[5.5,null], [6,600.2], [7,750.5], [8,945.3], [9,1000.3], [10,1305.9]]
},{
id: 'down',
name: 'down',
linkedTo:'up',
index:1,
color:'rgb(240,0,0)',
marker: { enabled: false },
data: [[1,800],[2,400.5],[3,null],[5,1805],[6,600.2],[7,null],[10,1305.9],[11,1050.6]]
}]
Example:
http://jsfiddle.net/jlbriggs/j3s1xphu/4/
There is also a plugin that looks like it does what you want, here:
http://www.highcharts.com/plugin-registry/single/33/Multicolor%20series

Related

How to add dots to Highcharts legend and bars?

Right now, my bar and legend looks like this. It is just a single color.
However, I am trying to add a pattern that does not exist within the default pattern fills. I want it to look like this.
I have looked quite a bit online, but can't seem to find anything to help me here. I have both an SVG and PNG for the pattern. Can anyone help me?
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
series: [{
showInLegend: true,
type: 'bar',
color: {
pattern: {
image: 'https://freesvg.org/img/dot-seamless-pattern.png',
width:150,
height:150
}
},
You can set an image as a pattern anywhere you can use a color. I used a png here, but I would recommend an svg.
https://jsfiddle.net/blaird/2jwL13oc/1/

How can we plot histogram graph with Apache Echart.js with Single bar highlighted with custom tooltips?

I look on the internet for some example of histogram with echart.js but only find this one.
I want build somewhat similar to this one with single bar highlighted with custom tooltip.
thanks in adavance for your help and time :)
Can you provide the code you are using? You can change the tooltip option inside series, and customize it as you want it. Use the echarts documentation that gives you a lot of options to make a tooltip echarts documentation.
The code would look like these:
options:{
tooltip:{},
series: [{
id: 'taskData',
type : 'scatter',
// ...
tooltip: {
// DO SOMETHING HERE
}
}]
}

Custom button next to exporting overlaps on the To: of the range picker

I need to add a customButton on exporting on highcharts which say 'o yeah'. The real code does more, and uses a custom icon, but for this example i'm using circle. The code is:
exporting: {
buttons: {
customButton: {
x: -25,
y: 1,
symbol: 'circle',
onclick: function(){ alert('yeah') }
}
}
Here's a fiddle
THe problem is fairly obvious. It overlaps the To: selector from the range selector. I could do hackery and push the range selector further, but then when there's title, it wouldn't work. I'm looking for a more proper solution, which'd work in all widths, devices and wouldn't conflict with other settings (like title).
It was pretty simple. I just had to move the rangeSelector to the left a little.
rangeSelector: {
x: -10
},
here's the fiddle

How to remove the white outline/border on Highcharts 3D on setData?

I am loading a column chart in 3D with Highcharts. On the inital load, the chart works perfectly. When I use setData() to change the series, the chart gains an odd white outline around its edges.
Before:
After:
I tried a few fixes such as using edgeColor and edgeWidth, although they made no difference.
Note: If I hover over one of the columns, the outline is instantly removed on that particular item until setData() occurs again.
How can I remove this white outline from the chart?
edgeWidth should be working, however there is a bug. Reported here - thanks.
As workaround, set edgeColor: 'rgba(0,0,0,0). Demo: jsfiddle.net/hdghyz2x
Bug is fixed already by commit (4c94d34) - will be included in next release (4.1.5). Available already in github version: http://github.highcharts.com/highcharts-3d.js
like this
$('#container').highcharts({
chart: {
type: 'bar',
},
title: {
text: 'Pie without borders'
},
series: [{
borderWidth: 0,
}]
});
});

Chart.js pie tooltip getting cut

I'm using Chart.js pie chart with tooltips which being cut for some reason.
Screenshot attached, didn't found any attribute/option to take care of it..
Is there anyway to take care of it?
Thanks!
This improper cutoff was raised as issue#622 in the Github repository for ChartJS.
This was determined to be a bug (evidently this bug hasn't yet been fixed)
https://github.com/nnnick/Chart.js/issues/622
In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix:
I'm sure that this is due to the fact that the tooltips are generated
within the confines of the canvas, making it difficult to fix.
I had the same issue on my doughnut chart and solved it by
implementing custom tooltips as per the example on the samples folder
- worked in conjunction with my existing tooltip fontsize and template settings in the chart initialisation code:
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
tooltipFontSize: 10,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
percentageInnerCutout : 70
});
Check out samples/pie-customTooltips.html for the custom tooltip code.
Copy/paste and it worked straight away. Very happy!
Tooltip displayed well outside the bounds of the canvas:
PS: there's a line chart example too, which I'm guessing will work
fine with bar charts.
You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 60,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 40
}
}
}
I found a workaround for this. I have blank labels on my x axis, so I just added a label with several spaces in it for the last label entry. That caused ChartJS to leave enough space for the label to fit, which also leaves enough room for the tooltip to fit.
In addition, I have large circles for my data points and the last one on the right was getting clipped before. Adding the extra space to the label also fixed that.
Here is the code where I create my labels. The ratings is my actual data defined earlier:
// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
labels.push("");
}
labels[ratings.length-1] = " ";
var data = {
labels: labels,
datasets: [
{
label: "Progress",
strokeColor: "rgba(255,165,0,1.0)",
pointColor: "white",
pointStrokeColor: "rgba(255,165,0,1.0)",
pointHighlightStroke: "#B87700",
data: ratings
}
]
};
Even if you have actual labels on your graph, you could add spaces to your last label to make it bigger. If you are centering your label, you could add the same amount of space before and after.
Obviously there will be limits where this will or won't work for you, but for my case I added 7 spaces and all looks good now.
Also, my case had an issue on the right side, whereas this question has an issue with the left side. The same fix should work, but putting the space on the first label.
It seems like Chart.js can't figure out which direction to show the tooltip because it can't detect the size of the tooltip element when it extends beyond the canvas.
In my scenario I fixed it by squeezing the text inside this particular tooltip closer with these options for the tooltip options object:
tooltips.titleMarginBottom = 1;
tooltips.bodySpacing = 1;
tooltips.yPadding = 2;
Wierdly enough Chart.js then correctly decides to show the tooltip to the left of the mouse and not below.
Would be cool if you could choose which direction the tooltip appears compared to the mouse.
In my case, I was able to work around this issue by reducing the amount of text in the tooltip. I did so using custom tooltip callbacks to specify the label text. My initialization looked like this:
var chart = new Chart(canvas.getContext("2d"), {
type: 'line',
data: chartData,
options: {
responsive: true,
tooltips: {
callbacks: {
title: function(tooltipItems, data) {
return tooltipItems[0].xLabel;
},
label: function(tooltipItems, data) {
return tooltipItems.yLabel;
},
}
},
},
});
There appears to be a fix available that hasn't yet been merged into the project: https://github.com/chartjs/Chart.js/pull/1064
Interestingly, by the setting the tooltipCaretSize option to 0 solves the issue.
{ tooltipCaretSize: 0, ... }

Categories

Resources