I'd like to draw custom bars with rounded corners to get lozenge shaped bars. There's also a requirement to overlay icons on or near some bars.
How can I override or access the rendering code for bars?
Unfortunately this opption is not avaiable in highcharts, but you can request your suggestions in our uservoice system http://highcharts.uservoice.com
Unless I am missing something, you don't need to over ride any rendering:
http://jsfiddle.net/jlbriggs/nHGRr/3/
plotOptions:{
series: {
borderRadius:10
}
},
You can also do this.
Include the following plugin.
plotOptions:{
series: {
borderRadiusTopLeft: 5,
borderRadiusTopRight: 5
}
}
Related
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
}
}]
}
I have a chart where I've set a maxBarThickness on my axis. When the chart is populated with a lot of data, the datasets are close together, but when there are just a few data points, the datasets look wide apart.
I have tried setting categoryPercentage to a smaller percentage but when the chart is populated with a lot of data (or on page resize), the chart looks wrong. Any help would be appreciated.
According to this github issue you cannot change the space between bars if you decide to set a barThickness (I assume it does not work when maxBarThickness is set either but I might be wrong, if so I'll delete this answer)
According to the previous link, you have two solutions:
If you want to keep your bar thickness (answer to the github issue):
If you don't want to stretch out the bar to fill the extra space, you have to reduce the width of the canvas.
Otherwise you could set a barPercentage and a categoryPercentage on your chart, without a barThickness or a maxBarThickness:
scales: {
xAxes: [{
categoryPercentage: 0.8,
barPercentage: 0.9
}]
},
Those are the default values.
Related questions :
Chart.js Bar Chart: How to remove space between the bars in v2.3?
CharJS 2.5.0 - How to remove space between bars
Reduce space between ticks in horizontal bar-chart chartJS
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.
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"
}
}]
}
}
I need to create "up" and "low" markers on along the Y-axis of my Chart.js line chart. I can't seem to find an out-of-the-box way of doing this. Anybody can help me on how to write a plugin to achieve something like this? (See the horizontal red lines along the 70 and 50 Y-axis.
I found a plugin called Chart.Annotations.js on the Chart.js GitHub root page. It is exactly what I needed!
You need to add the following attributes to your options object. Add an annotations: attribute per line you want to draw. In my case I had 2.
annotation: {
annotations: [{
type:'line',
mode:'horizontal',
scaleID:'y-axis-1',
value:'10',
borderColor:'#000000',
borderWidth:2
}]
}
Look at this screenshot of my final implementation: