I would like to change the colors that display in a pie chart using custom code. As far as I understand this is not possible with JS or CSS at the moment. It would be great to make the colors fit brand colors and/or make the slices color coded (to better fit what they convey).
A way to do this without code in the Builder would be useful I guess, but it should at least be accessible to change this with custom code.
The great thing about Knack is its simplicity for anyone that wants to create a bespoke CRM system. In my own situation, I spent a lot of time researching CRM systems that would be able to manage my data. Knack was the only system that I found that worked. It is therefore a shame that simple tasks like changing the colour of components in pie charts require a knowledge of CSS or Javascript, both of which I have never used. For the end user of a system, presentation of data is very important and the correct colour in graphs is all part of this, so it is important to get it right.
If this is not going to be implemented in the near future. Please supply basic instructions so that a complete novice like myself who has never coded in their lives, can implement.
Setting specific min and max values is something I am also looking for, Conor, but to no avail. If there is a solution to setting specific min/max values, I would like to know...
Couple of thoughts on this:
1. Google charts: See https://support.knack.com/hc/en-us/community/posts/220702808-Insert-google-chart- for examples where others have used the google chart api to insert a chart with complete control using Knack data.
2. Not sure the Highcharts-32.chart functions will run until after the charts are rendered and there might not be a way to monitor that without promises that's beyond me.
Keen to hear how you go so please post any updates here!
Did anyone manage to achieve customisation of of a specific Highchart? I need to set the max value of the y axis on a specific column chart. It needs to be a max value of 100% (1.00). It looks so untidy at the moment as if one of the records sits at 100%, it adjusts the max value to 200%.
This is a bug that i've been trying to solve for some time. I've looked at the highchart API docs https://api.highcharts.com/highcharts/yAxis but having no joy with what i've found and trying to implement it in JS section of Knack:
Highcharts-32.chart({
yAxis: {
max: 100
}
});
OR
Highcharts-32.chart({
yAxis: {
max: 1
}
});
Hi Kyran,
You just need to change more parameters. You can use this code and tweak it to your liking:
The only thing you should have to change here is the id tag in the beginning, to match the id of your report view, as well as the colours you would like to show.
/* Fix colors for area charts */
#kn-report-view_150-3 div.highcharts-container svg g.highcharts-series-group g.highcharts-series path:nth-child(1) {
fill: rgba(122,157,80,0.6);
}
#kn-report-view_150-3 div.highcharts-container svg g.highcharts-series-group g.highcharts-series path:nth-child(2) {
stroke: rgb(122,157,80);
}
#kn-report-view_150-3 div.highcharts-container svg g.highcharts-series-group g.highcharts-markers path,
#kn-report-view_150-3 div.highcharts-container svg g.highcharts-legend g.highcharts-legend-item rect {
fill: rgb(122,157,80);
}
Hi all,
Thanks for all the support on the above, it has helped a lot.
Does anyone know how to change the colour of an area diagram? I can change the legend but not the area colour itself?
Thanks
Legends for pie charts:
#kn-report-view_4-1 > div > #highcharts-0 > svg > g > g > g > g:nth-child(1) > rect {fill: magenta;}
#kn-report-view_4-1 > div > #highcharts-0 > svg > g > g > g > g:nth-child(2) > rect {fill: cyan;}
Warning : for the same pie chart, #highcharts-0 is not always consistent. To confirm this, try leaving the page with the pie-chart and return to it; the 0 will change to another number.
For a Bar chart:
#kn-report-view_4-2 > div > #highcharts-2 > svg > g > g > rect:nth-child(1) {fill: magenta;}
#kn-report-view_4-2 > div > #highcharts-2 > svg > g > g > rect:nth-child(2) {fill: cyan;}
Thank you Justin, let me have a look when I get around to this again. I am caught up with other stuff since this didn't take me further!
Highcharts is a plugin that Knack has bundled in to their product: https://www.highcharts.com/
I've tried to manipulate in the past with jquery with frustrating results.
Altering highcharts graphics can be a real pain in Knack because they are rendered separately from the Knack DOM. You can't 'wait' for them to render before calling a function.
I'm working on a solution to retrieve Knack models and build my own charts that I have more control over. I will post when I have something worth posting.
In the meantime........................
I stumbled on this code a previous developer had added to a site I've worked on. Not sure if this is helpful to you but it appears he was specifying the order of colors in highcharts.
In the javascript editor:
Highcharts.setOptions({
colors: ['red', '#c68c53', 'yellow', 'Green', 'grey', 'blue', 'orange', 'violet', 'light green', 'light grey', 'black', 'dark green', 'dark grey', 'pink', 'magenta', 'fuchsia']
});
more on setting options here: https://www.highcharts.com/docs/getting-started/how-to-set-options
Managed to change the highcharts-n and make it work. Still I have 2 issues:
1. The legend colors don't change based on this!
2. I need to assign the color not based on child but based on the value of the field - e.g. Green, Amber, Red and Blue. There isn't a provision to sort based on custom values so I cannot control the order of the child??
Custom colors and custom sort orders are important. Please guide me, thanks.
After some digging and tweaking, I get the color on the first pie chart on the scene. I have 2 pies on one row. the 2nd chart doesn't take the colors I need.
This works for the first pie (initially I didn't have the data to see)
#kn-report-view_1079-1 > div > #highcharts-0 > svg > g > g > path:nth-child(1) {fill: green;}
#kn-report-view_1079-1 > div > #highcharts-0 > svg > g > g > path:nth-child(2) {fill: yellow;}
#kn-report-view_1079-1 > div > #highcharts-0 > svg > g > g > path:nth-child(3) {fill: red;}
This doesn't work on the second pie on the same row within the same scene! Whatelse need to be tweaked?
#kn-report-view_1079-2 > div > #highcharts-0 > svg > g > g > path:nth-child(1) {fill: green;}
#kn-report-view_1079-2 > div > #highcharts-0 > svg > g > g > path:nth-child(2) {fill: yellow;}
#kn-report-view_1079-2 > div > #highcharts-0 > svg > g > g > path:nth-child(3) {fill: red;}
Brad, thanks for getting back. I assume I have to change the view id, which I did. I'm looking at a second pie in the same so I used the suggestion as follows:
#kn-report-view_1079-2 > div > #highcharts-0 > svg > g > g > path:nth-child(1) {fill: green;}
#kn-report-view_1079-2 > div > #highcharts-0 > svg > g > g > path:nth-child(2) {fill: yellow;}
#kn-report-view_1079-2 > div > #highcharts-0 > svg > g > g > path:nth-child(3) {fill: red;}
yet no difference when I saved the CSS and reloaded the page. I see the original color pattern only; what am I doing wrong?
Thanks
sbm - without testing I suggest you try the top three children with the colors you want:
#kn-report-view_1027-1 > div > #highcharts-0 > svg > g > g > path:nth-child(1) {fill: green;}
#kn-report-view_1027-1 > div > #highcharts-0 > svg > g > g > path:nth-child(2) {fill: yellow;}
#kn-report-view_1027-1 > div > #highcharts-0 > svg > g > g > path:nth-child(3) {fill: red;}
@Brad Stevens
Pardon me I am new to Knack as well as CSS and JS. But learning and working my way through. The slices are based on the data. How do I identify or determine the color associated with the field values? e.g. I have a field with 4 possible options and I want distinct Traffic light color for the top 3 with blue for the least option. Any pointers will be appreciated
Thanks in advance
Thank you! I'll try the CSS-approach based on this.
Very quick look in Chrome Inspector and I could change a pie chart slice to red using this CSS:
#kn-report-view_1027-1 > div > #highcharts-0 > svg > g > g > path:nth-child(4) {fill: red;}
Brad