library options hash does not work !!
al3izz opened this issue · 16 comments
It's imperative that I use chartkick in my web app; however, there's one issue stopping me from using it: I'm not able to change the background color or use any library options within the 'library' hash when creating the chart. I've tested charting libraries Chart.js and Highcharts.js, and the results are the same. Whatever library options I pass, none of them work. Am I doing something wrong? Here's an example of my chart:
<%= line_chart User.group(:created_at).count, library: {backgroundColor: "#555"} %>
I'm using Chartkick 2.0. Is anyone else having this issue?
Everything is fine for me. https://github.com/bodrovis/Sitepoint-source/tree/master/Graphs_with_Chartkick this app initially used older version, but I just migrated to 2.0 and no problems so far. Are you able to change bg color while using the older version of the gem? Btw, this is the source code for my article https://www.sitepoint.com/make-easy-graphs-and-charts-on-rails-with-chartkick/ that you might find useful.
I'm having the same problem. I'm interested in setting lineTension to zero, but using the library: {property: value} syntax isn't working. Same when I try to set backgroundColor. I also tried setting options in a chartkick.rb initializer with similar results.
This seems to be a problem with Chart.js. Using google charts everything works fine for me.
I can confirm this is also a problem with Highcharts.
Can someone create a JS Fiddle to reproduce? With Highcharts, you need to use:
line_chart data, library: {chart: {backgroundColor: "#eee"}}http://api.highcharts.com/highcharts#chart.backgroundColor
Chart.js doesn't have an option for background color, but you use CSS to set it.
For charts.js straight lines instead of splines, would the format then be:
line_chart data, library: {chart: {tension: 0}}
?
Thanks,
--Dean
On Sat, Jul 2, 2016 at 11:21 AM, Andrew Kane notifications@github.com
wrote:
Can someone create a JS Fiddle to reproduce? With Highcharts, you need to
use:line_chart data, library: {chart: {backgroundColor: "#eee"}}
http://api.highcharts.com/highcharts#chart.backgroundColor
Chart.js doesn't have an option for background color, but you use CSS to
set it.—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#268 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AABbkyflPmR1bL9JPY_yQ06Fld2efuCKks5qRqwwgaJpZM4IzgfG
.
For Chart.js, you can't set any of the data structure options, like line tension, with the typical library option.
There's an undocumented way to accomplish this with:
line_chart [{name: "name", data: data, library: {lineTension: 0}}]@genlighten line_chart data, library: {chart: {tension: 0}} works for chart.js it seems.
@ankane Just the documentation needs to be updated?
Here is the js fiddle for highcharts, I can confirm that value works. I think everyone just has the way we structure the data options incorrect, myself included.
Cleaning up issues
For those coming on across this closed issue... The following worked for me (from a haml file):
= line_chart([{name: 'Projects', data: user_stats, library: {lineTension: 0, pointRadius: 0}}])
NOTE: pointRadius, not pointSize!
And lineTension: 0 did indeed create straight-line, point-to-point line.
I dont know if it was the issue back then, but i ran into a simmular problem and it the solution was just to read the docs carfully.
Multiple Libraries
If more than one charting library is loaded, choose between them with:
<%= line_chart data, adapter: "highcharts" %>
Then the libary parameters will work.
dear @ankane please kindly explain how to use google visualization configuration, i'm trying to add range but it didn't work
here my code
<%= timeline @js_array, {"library":
{title: "Company Performance",
"options": {"range": {'start': @today, 'end': @tomorrow}},
"hAxis":{"title":"Date","gridlines":
{"count":3,"color":"#CCC"},"format":"dd-MM H:m:s"}},
"discrete": true} %>
both @today and @tomorrow has mysql date value yyyy-mm-dd
update, found the solution. but ruby can't instantiate javascript object from ruby object. is there any solution for this?
<%= timeline @js_array, library:
{title: "Company Performance",
hAxis:{
minValue: "new Date(#{@today})",
maxValue: "new Date(#{@tomorrow})",
title:"Date",
gridlines:
{count:3, color:"#CCC"}, format:"dd-MM H:m:s"}}
%>
Hi, I am using chartkick with Highcharts. i want to set dashed gridlines. but it's not working.. is there any solution?
<%= line_chart data: data ,download: true, adapter: "highcharts", library: {chart: {yAxis: {gridLineDashStyle: 'longdash'}}} %>
For React with chart.js and react-chartkick
// @flow
import React from 'react';
import ReactChartkick, { ColumnChart } from 'react-chartkick';
import Chart from 'chart.js';
import Container from '../common/Container';
import LegendContainer from '../common/LegendContainer';
import ColorLegend from '../common/ColorLegend';
type Props = {};
type State = {};
class RevenueColumnChart extends React.Component<Props, State> {
render() {
const indigo = 'rgba(62, 11, 108, 0.8)',
violet = 'rgba(227, 191, 245, 0.8)';
const data = [
{
name: 'Forecast sales',
data: {
'2018-11-01': 3,
'2018-11-02': 4,
'2018-11-03': 30,
'2018-11-04': 8,
'2018-11-05': 11,
'2018-11-06': 45,
'2018-11-07': 12,
},
},
{
name: 'Actual sales',
data: {
'2018-11-01': 5,
'2018-11-02': 8,
'2018-11-03': 22,
'2018-11-04': 3,
'2018-11-05': 12,
'2018-11-06': 23,
'2018-11-07': 9,
},
},
];
return (
<Container chartName="Revenue" chartDescription="Description text">
<LegendContainer dot={false} />
<ColorLegend />
<div id="chart-legends" />
<ColumnChart
legend={false}
prefix="£"
data={data}
colors={['rgba(227, 191, 245, 0.8)', indigo]}
dataset={{
borderColor: 'transparent',
categorySpacing: 0,
borderWidth: 0,
barPercentage: 0.9, //1.0 will take the whole category width - not working
cornerRadius: 10,
fullCornerRadius: false,
}}
stacked={false} // one above onother
library={{
legendCallback: function(chart) {
var customLegend = document.getElementById('chart-legends');
// document.getElementById('chart-legends').innerHTML = mychart.generateLegend();
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span>');
if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
}
text.push('</li>');
}
text.push('</ul>');
return text.join('');
},
animation: { easing: 'easeOutQuad' },
tooltips: {
enabled: false,
custom: function(tooltipModel) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = '<table></table>';
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
var titleLines = tooltipModel.title || [];
var bodyLines = tooltipModel.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltipModel.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; width: 6px';
style += '; height: 6px';
style += '; display: 6px';
// span: the categoty dot color
var span = '<span style="' + style + '"></span>';
// body value + text from api/dataset:data
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
tooltipEl.style.pointerEvents = 'none';
},
yPadding: 12,
xPadding: 14,
bodyFontFamily: 'ProximaNova-r',
titleFontStyle: 'lighter',
bodyFontSize: 16,
borderColor: '#192340',
},
scales: {
xAxes: [
{
barPercentage: 1,
gridLines: {
color: '#fff',
fontColor: 'red',
},
},
],
yAxes: [
{
ticks: {
// Include a £ sign in the ticks
callback: function(value, index, values) {
return '£' + value;
},
},
gridLines: {
color: '#f4f4f4',
},
},
],
},
}}
/>
</Container>
);
}
}
export default RevenueColumnChart;