My own defined colors for graphs in Kintone - css

Question

I'd like to set my own defined colors for graphs that appear in Kintone.
I've found out for pie charts, you can upload the below CSS code to the App to have some areas of the pie to become a color of your choice.
.highcharts-series-group .highcharts-series path:nth-of-type(even){
fill:pink;
}
What I'd really like to do though, is apply the same thing to the Line charts in kintone.
I've tried the below CSS:
.highcharts-tracker path {
fill: red;
}
This only changes the points plotted on the graph, but not the lines in between the points.
How can I identify the lines in this graph so that I can end up with lines of the color of my choice??

Answer 1

Updated 6/24/18
Like you mentioned, the code that I showed you displays only on the record detail page. However, if you just make the process to run on the record list event "app.record.index.show", you can show the graph on the top of the record list page.
Also, it will be better to use kintone.app.getHeaderSpaceElement() to append a graph on the record list page.
The following page is an example of how to append something on the record list page using the kintone.app.getHeaderSpaceElement():
kintone developer network - kintone x OpenStreetMap
https://developer.kintone.io/hc/en-us/articles/115003669514
The following page is about the record list header element:
kintone developer network - Get Record List Header Element
https://developer.kintone.io/hc/en-us/articles/213148937-Get-Record-List#getHeaderSpaceElement
=================================================
Original Reply
It's better off not editing the DOM because it might not work after any kintone updates. I recommend creating a custom graph using Chart.js, a javscript library. The following page helps you how to do so.
Example Code
(function() {
"use strict";
// Events for adding and editing records
var eventsCreateShow = ['app.record.create.show', 'app.record.edit.show',
'app.record.index.create.show', 'app.record.index.edit.show'];
kintone.events.on(eventsCreateShow, function(event) {
// Hide the "Chart" Group field
kintone.app.record.setFieldShown('Chart', false);
});
// Display the chart on the record details page (PC and mobile)
var eventsDetailShow = ['app.record.detail.show', 'mobile.app.record.detail.show'];
kintone.events.on(eventsDetailShow, function(event) {
var record = event.record;
var data = {
labels: ["Language Arts", "Math", "Science", "Social Studies", "P.E."],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(0,140,232,.4)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [
record['language_arts']['value'],
record['math']['value'],
record['science']['value'],
record['social_studies']['value'],
record['pe']['value']
]
}
]
};
// Set Chart.js options
var options = {
scaleShowLine: true,
angleShowLineOut: true,
scaleShowLabels: true,
scaleBeginAtZero: true,
angleLineColor: "rgba(0,0,0,.1)",
angleLineWidth: 1,
pointLabelFontFamily: "'Arial'",
pointLabelFontStyle: "normal",
pointLabelFontSize: 16,
pointLabelFontColor: "#666",
pointDot: true,
pointDotRadius: 5,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 3,
datasetFill: true,
responsive: true
};
var elRadar;
var elCanvas = document.createElement('canvas');
elCanvas.id = 'canvas';
// Display radar chart onto the Blank space
// Edit display size depending on PC or mobile
if (event.type === 'mobile.app.record.detail.show') {
elRadar = kintone.mobile.app.getHeaderSpaceElement();
elCanvas.style.position = 'relative';
elCanvas.style.top = '10px';
elCanvas.style.left = '10px';
elCanvas.height = '300';
elCanvas.width = '300';
} else {
elRadar = kintone.app.record.getSpaceElement('Radar');
elCanvas.height = '400';
elCanvas.width = '400';
}
elRadar.appendChild(elCanvas);
var myChart = new Chart(elCanvas.getContext("2d")).Radar(data, options);
});
})();
Ref:kintone developer network - Display radar charts with chart.js
https://developer.kintone.io/hc/en-us/articles/115006413388-Display-radar-charts-with-chart-js
I hope this helps