How to add dots to Highcharts legend and bars? - javascript

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/

Related

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
}
}]
}

ChartJS -- How do I change scale color when I have to scales?

I created a nice little chart with two scales using two datasets. I have read the documentation for ChartJS pretty thoroughly, but I can't seem to find out how to add specific colors to the chart scales (numbers). The left scale should be orange and the right one blue. Is this even possible, and if so, how do I do it? I don't think it's necessary for me to supply any source code for the chart itself, but let me know if it is.
Take a look at "Tick Configuration" under "Scales". You need to set the fontColor option for each axis. Like this:
options: {
scales: {
yAxes: [{
ticks: {
fontColor: "#666"
}
}]
}
}

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

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

Highcharts: duplicate datalabel text on export

I've come across a weird glitch with Highcharts export (to PNG, SVG etc). Essentially, when exporting, the datalabels on the chart become garbled, so that they duplicate like so:
I've tried changing the export image dimensions (even to match the original div size exactly) but I still have the same issue. The only thing I can think that might be affecting it is a custom formatter function (which shows the percentage after the total for each data point), but there's no manipulation of text size or anything. Any ideas?
This looks like a new problem in the export service.
I was able to work around it by disabling text shadows on the data labels. To do this, I added:
dataLabels: {
style: {
textShadow: ''
}
}
This is what worked for me. I disabled the textShadow inside the series
series: [
{
name:'Serie1',
data:[2027.15, 2027.15, 0.0],
dataLabels:{
enabled: true,
style: {textShadow: 'none'
}
}
]

Highcharts : Under Y Axis we need to display a Image

Please see the Highcharts related jsfiddle here
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-dual-axes/
This is my Y axis
{
// Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
},
opposite: true
}
Typically what i want is that , under the Y axis Secondary Axis label (that is below 250 mm here in this case ) , i need to display the Temparature series Symbol
Could anybody please help me ?
I'm not quite sure why you want a symbol for temperature on the rainfall side, but let me see if I can help.
Well, if you just want to display a picture in the same place on your chart, then use the highcharts renderer. Highcharts drawing API. In this case, just use the image(...) function.
I'm not finding simple ways of doing more dynamic bits. There are some enforcements of the css for the axis's that prevent anything but text to show up. You may be able to dig into the axis (in the formatter; this.axis) and find something useful. But you may have more luck running jQuery code to find the location of the text you want, then using offset(), find where in the page to slap your image onto. Either using a div or the highchart.Renderer.
Good luck!

Categories

Resources