Styled Mode : Color theme for bar - highcharts
Because of the CSP, I need to use Styled mode on highcharts and I need a specific color theme.
I try css but after 10 bar/piece of pie chart, class restart to 0
highcharts-point highcharts-color-9 -> highcharts-point highcharts-
color-0
Before styled mode, I have this array of color:
$ob->colors = array("#0017ff","#00a2ff","#7400ff","#ff4500","#ffd100","#00c33d","#f93078","#0bdcc4","#d26bfa","#feaa10","#00ff45","#d1ff00","#96a7d6",
"#454d1e","#637d6f","#30b2d7","#28e743","#ebab1b","#a6219b","#1da4b9","#3d1fb0","#947a46",
"#73bceb","#b21cc0","#f8e809","#436e39","#a90650","#3c68b5","#7f76a5","#d68f03","#c9f7cd","#4de457","#9a303b","#401156","#124c38","#f0fa84",
"#493b8a","#7ef2f9","#a10ce9","#a3b931","#763f1c","#c97539","#9a8b58","#9e503e","#144d87","#5f3a1d","#15331b","#b91eee","#c6bf2f","#3e165c",
"#a864e7","#f784d4","#21887e",'#228B22','#556B2F','#6B8E23','#808000','#BDB76B','#B8860B','#FFA500','#D2691E','#8B4513','#4682B4','#8B0000',
'#008B8B','#5F9EA0','#4169E1','#8D38C9','#9E7BFF','#153E7E','#7D053F','#E4317F','#FF00FF','#7E587E','#E0FFFF','#228B22','#556B2F','#6B8E23',
'#808000','#BDB76B','#B8860B','#FFA500','#D2691E','#8B4513','#4682B4','#8B0000','#008B8B','#5F9EA0','#4169E1','#8D38C9','#9E7BFF','#153E7E',
'#7D053F','#E4317F','#FF00FF','#7E587E','#E0FFFF');
http://jsfiddle.net/yn2Lcbrm/
Look here, after, Mellon bar class is highcharts-point highcharts-color-0. Can I do something in css or extend limit of 9 to an another limit?
You need to increase the colorCount property:
chart: {
...,
colorCount: 20
},
Live demo: http://jsfiddle.net/BlackLabel/fjk9qub2/
API Reference: https://api.highcharts.com/highcharts/chart.colorCount
Related
Highcharts styledMode with highcharts.css import causes pie legend hover to apply to all legend items
Using highcharts, if you create a pie chart with styledMode: true; and you import their highcharts.css file, the hover effect on legend items causes all legend items to go opaque. Code That Causes It You can even see this on their demo page by selecting the Styled Mode: Pie. And then hovering over the legends items. If you set the styledMode: false; and then remove the CSS import it goes away. My question basically: Is this a bug? It seems like unintended behaviour.
I don't think that it is a bug - it's more like a small difference between styledMode and the regular one, which could be easily fixed by changing the opacity for it.
Demo: https://jsfiddle.net/BlackLabel/pq6omt2y/
CSS:
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
opacity: 1
}
Cannot get Highcharts solidgauge stops to work in styled mode
I am converting all the charts in an application to Highcharts 5.x styled mode. I cannot find how to make the solidgauge stops work in styled mode. When I inspect the SVG, I do not see any class for the colors. I couldn't find any solidgauge stops example with styled mode. Anyone can post a working example?
In a solid gauge series color is calculated dynamically based on stop values - currently, I do not think you can do the same with only css. The point fill atribute is calculated and set correctly but in this case css class takes precedence and the point's color has a fixed fill taken from the css file (highcharts-color-{n} class).
Keep stops in options and remove class from the point (or set colorIndex to a non existing number, e.g. 99)
.highcharts-color-0 {
fill: #7cb5ec; //remove fill attribute
stroke: #7cb5ec;
}
or:
data: [{y: 80, colorIndex: 99}], // the point's class will highcharts-color-99 now
example: http://jsfiddle.net/gj8zfw73/
Highcharts: How to hide the text from legends
What I'm after is showing only the colors of the series in the legends and hiding all the text while keeping the title in the series data so it would come in the tool tip. Through using labelFormatter this (fiddle) is the closest I got to doing it, when I remove the text however it allows the legends to overlap. Eventually, just showing the colors of the legends and not the legends' text itself is the result I'm after, i.e:
Set,
itemStyle: {
display: 'none',
}
and remove
layout: 'vertical',
DEMO
Add data to a legend, with different format? Or should I use a label?
I am experimenting with the legend; trying to get as result, a panel where I display data about the chart. I am planning to add the last value, and min and max. Looking for some examples, and I found one that use a function called labelFormatter, altho I am not having luck in understanding how does it works. I need to have values with different text color and different size, so I am not even sure if I can use the title of the legend for this purpose, or if I should hide the legend and create directly a label (altho the issue then is related to moving and resizing, right? Since the legend update its position if the chart window is resized). Which is the best way to do what I am planning to do? a label or the legend?
If you are considering adding HTML elements into the chart plot area then you will have to use Highcharts Renderer API.
You can refer this JSFIDDLE working demo
it works like:
var chart = new Highcharts.Chart({
....
.....
......
}, function(chart) { // on complete
chart.renderer.text('This text is <span style="color: red">styled</span> and linked', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
highcharts dataLabel overflow: justify issue
I've upgraded from highcharts 3.0.5 to 3.0.7 and with that change came the dataLabels overflow:justify property that is set to justify the dataLabels (see this fiddle for an example). This will just slide labels that fall outside of the chart into the bar, but the color doesn't change and there doesn't appear to be an option to change the color. Is there A) any way to force the label to appear beside the bar and readjust the size of the bars, or B) any way to change the color when overflow: justify kicks into play? The only "fix" that immediately comes to mind is to provide some maxPadding, but that feels a bit hacky.
instead you can use the property overflow: 'none', crop: false here is the API reference I hope this will help you
I ran into the same thing and came up with a solution that appears to work for my scenario.
After rendering the chart, I look through the series for dataLabels that have been right-aligned, then change them to white using jQuery.
// snipped: rendering the chart
var chart = $('#chartContainer').highcharts(),
labels = $('#chartContainer').find(".highcharts-data-labels tspan"),
indexesNeedingWhite = [];
$.each(chart.series[0].data, function (index, data) {
if (data.dataLabel.alignOptions.align === "right") {
indexesNeedingWhite.push(index);
}
});
// find the exact text label within this container
// and change the fill to white
$.each(indexesNeedingWhite, function (i, index) {
$(labels[index]).css('fill', 'white');
});