I'm using PrimeNG and have a line chart set up that has two data sets. one of those lines is solid, and i'd like to make the other line dashed or dotted. is there an option for this in ChartJS?
My bad, took another look at the chartjs docs and found it! You can set it with the borderDash option. Set mine to borderDash: [10,10]
Related
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'
}
I have a chart that shows 3 datasets - 2 Line, 1 Bar.
I would like to be able to format the Y-2 axis labels in the screenshot below with HTML to allow me to show the values in each tick as bubbles to match the styling displayed on the line data points. (I am using the datalabels plugin to achieve the data point styling https://github.com/chartjs/chartjs-plugin-datalabels).
In addition to this I would like to have all labels with "XLabelLine1" and "XLabelLine2" to have a line break between them.
Is this possible? From looking at the docs it looks as if the axis labels can only be strings.
You are correct that the tick labels can only be strings and that the Chart.JS tick labels do not have HTML support. It's likely a plugin would need to be developed for this behavior. Sorry. :)
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 have to draw chart with different line settings (weight, pointSize, etc.). For example first line has to be 3px weight and 5px point size, but second - without points. I didn`t find option to configure chart in such way. There is a compound charts but it is a deprecated API. I also thought that I could call draw() method several times with different data and options, but it cleans previous drawing. So my question - how could I call draw multiple times without rewriting previous drawing or how I could configure chart to use custom formatting for different lines?
Have you check the settings in the "series" option? Doc : https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
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.