I have a problem with the ChartJS API in order that I need to paint a Line graphic, but lines should be painted vertically instead of horizontally.
The only response I can found is to draw static vertical lines in a "standard" horizontal line chart, but that's not the feature I need.
I suppose that ChartJS should hace any graphic type or options in Line graphic type to do this, but I don't see it.
Using "chart.js": "2.9.3"
I need something like this:
Thanks for answers.
If you are using the beta (version 3) of Chart.js you can set the property indexAxis to y in your options object to get the desired behaviour
Example:
options: {
indexAxis: 'y'
}
Related
I have an AMCharts XYChart with one columnseries which is added and shown when I init the chart. I have another lineseries which I also add, but series.hide() when I init the chart. The legend then allows me to show/hide the lineseries.
Two problems:
1) When the chart is first set up, it prezooms to the single columnseries. I want the ability to zoom on the chart, but I don't want it to prezoom when it first loads with the single series. What is the chart configuration to disable this or return the chart to the full zoom extent onready (which would be a bit hacky).
2) The second issue is that sometimes when I click the lineseries in the legend to add it, the zoom doesn't work at first when the lineseries is added to the chart. Instead, it may only correctly zoom on the subsequent click. I may escape this second problem if the first one is fixed.
When using echarts, in several lines of code the following can be achieved: https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-doughnut , more specifically notice the entrance animation and the hover behaviors and the legends hover and the smooth tooltip movement and legend click behavior and the quick chart rerendering.
On the other hand echarts lacks touch events support and some other stuff and thus I wanted to use chart.js to build this same doughnut chart to see if chart.js is capable of it. The chart.js examples I saw online have very basic animations and interactions.
I saw in chart.js website that support is given by creating appropriate stackoverflow question with chart.js tag, so I am creating this question to ask if its possible to create a dougnut chart with the described behaviors using chart.js
I am using chartjs to draw a line chart on my application. I have dates onx-axis but as a category scale. Means labels are strings but are dates. On the y-axis i have numeric values. I am changing the chart on some functionality and after change i want to highlight some area of the chart. Is there any way i can highlight an area on the line chart? I have searched but did not find anything.
I want to do this pragmatically like there are some specific dates which i want to highlight so i want to have this type of effect.
Any kind of help would be much appreciated. I am very beginner in charts and javascript stuff.
P.S this is specifically for the line chart not for the doughnut
I use this https://github.com/chartjs/chartjs-plugin-annotation lib to do something like this.check on it. I think this will helpful.
I am new to Chart.js and I want to hide the y axis and x axis line and label in my chart. I looked at the documentation and couldn't find a good option. Has anyone else encountered this problem and have a solution?
Using the showScale option would be better
var ctx = document.getElementById("LineWithLine").getContext("2d");
new Chart(ctx).Line(data, {
showScale: false
});
Fiddle - http://jsfiddle.net/wb3kcunt/
This hides gridlines too. If you want to hide only the axes and labels and not the grid lines, just set scaleFontColor and scaleLineColor to a transparent color.
I found that if you edit a library posted in this answer, you can achieve this
In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
In my project, I use Protovis 3.2 to render line chart.
I want to fill gradient color in the area under line chart. Although I have tried available color functions in Protovis but they did not work.
Is there any simple solution for this problem?
Below is my code to add area into line chart
addArea: ->
self = this
#vis.add(pv.Area)
.data(self.data[0].values)
.bottom(1)
.left((d) -> self.xAxisUnits(d.index))
.height((d) -> self.yAxisUnits(d.value))
.fillStyle(pv.ramp('black', 'red'))
.anchor("top")
.add(pv.Line)
.lineWidth(2)
.strokeStyle("#78B9E2")
this
Sorry, but I'm pretty sure Protovis has no support for gradient fills. You might try D3.js, which doesn't support gradients out of the box but offers lower-level access to the SVG element, which you can use to define an svg:linearGradient fill.