Only tested this with Line and Area charts:

If all values are 0, the chart's SVG-path is not rendered properly because it has a bunch of NaNs in it, like so:

<path 
    stroke="#3fb1e3" 
    fill="none" 
    stroke-width="1" 
    style="stroke-dasharray: none; transition: none 0s ease 0s;"     
    d="M0,NaNC0,NaN,38.09375,NaN,57.140625,NaNC76.1875,NaN,95.234375,NaN,114.28125,NaNC133.328125,NaN,152.375,NaN,171.421875,NaNC190.46875,NaN,209.515625,NaN,228.5625,NaNC247.609375,NaN,266.65625,NaN,285.703125,NaNC304.75,NaN,323.796875,NaN,342.84375,NaNC361.890625,NaN,399.984375,NaN,399.984375,NaN">
</path>

There's probably just an issue with the math somewhere. As long as at least 1 value is not 0, everything works fine.

I hope it's an easy fix and will be fixed soon. Thank you for this awesome library!

Still using more and more your vue plugin. Awesome!

Pies doesn't seem to respect the given width/height. Do you know why?

Here's an example: https://vuep.run/1471fd02

Thanks a lot! 👌

I have a line chart with 10 series of data and it's quite difficult to distinguish them due to the library reusing colors and/or using similar ones.

Is there a way to define what colors to use?

First of all, thanks for this great library.

I was wondering if there is a way to set the rotation of the labels of the axis to avoid the labels to clash to each others.

I saw a solution using the interval property but that property removes some of the labels.

Please have a look at the example below to understand better what I'm trying to achieve.

My first approach was to play with css on the SVG elements but apparently things like:

svg > g:nth-child(2) text {
    transform: rotate(-45deg);
    transform-origin: center bottom;
}

transform the whole group of labels rather than one by one

Coming up on a dead end with gradients utilising the simple setup previously mentioned below.

Chart axis appear along with the .svg but the stroke with url(#color-id) isn't rendering, despite being identical in output to your docs example. The only difference in output with chrome/firefox outputting the html element <linearGradient> instead to lowercase <lineargradient>. Not sure if this would be an issue or not?

https://jsfiddle.net/eywraw8t/256740/

<div id="app">
<template>
  <la-cartesian :data="values">
    <defs>
      <linearGradient id="color-id" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#2c3e50"></stop>
        <stop offset="0.5" stop-color="#42b983"></stop>
        <stop offset="1" stop-color="#6fa8dc"></stop>
      </linearGradient>
    </defs>
    <la-line curve :width="2" prop="value" color="url(#color-id)"></la-line>
    <la-x-axis></la-x-axis>
    <la-y-axis></la-y-axis>
  </la-cartesian>
</template>
</div>

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/laue"></script>

<script>
  new Vue({
    el: '#app',
    data: () => ({
    values: [
      { value: -2 },
      { value: 2 },
      { value: 5 },
      { value: 9 },
      { value: 5 },
      { value: 10 },
      { value: 3 },
      { value: 5 },
      { value: 0 },
      { value: 1 },
      { value: 8 },
      { value: 2 },
      { value: 9 },
      { value: 0 }
    ]
  })
});
</script>

First of all, thanks a lot for this awesome lib! I love using it. 🎉

I'm trying to get la-y-axis works with :interval prop, but I don't understand how I should use it.

I tried with a simple :interval="1" or a bit more complex :interval="i => i === 0 || i % 1 === 0" to get only round values, but I'm not sure about how I should use it!

Here's an example: https://vuep.run/c8fa628b

With the results I get:

It might be related with #11 but it might also be me not understanding how to use it?

Could you add a little more explanations on how to define the new :interval prop?

Thanks a lot! 👌

Probably I got something wrong but currently my charts work only half-way in Safari (and therefore in the pwa / ios). Before digging much deeper I wonder if that's a known issue and limitation of laue or if it actually should be working cross-browser.

How can I setup the numbers between this legend? I want steps for about 10/20, this is getting to close to eachother.

I'm attempting to get the chart running in Chrome Version 68.0.3440.84 with not much luck at all.

I'm getting 'Unexpected Identifier' in Chrome Version 68 for imports/exports and transpiler wont fix it, using script type="module" only causes further issues such as 'Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".', however I feel that this may be due to me misinterpreting the setup.

A small demo project in the repo that users can download with only the minimal required html/js needed to produce the graph locally/on my server would be of great assistance. I know I must be missing something painstakingly obvious to get this running, so seeing a working setup would be great

Not sure if this is really a laue thing or a bootstrapvue thing, but it is only present on charts marked with autoresize. Stripped down example below-

https://jsfiddle.net/eywraw8t/301125/

Following the link above using simple chart examples you can reproduce the behaviour. Click the text "Chart" to display the hidden content, the autoresize marked chart will not render but the chart with a set :width will. To get the top chart to then render adjust window size.

Wondering if there is a way to add tooltip to the pie chart?

When creating the following area chart

note, use of hide-line has no bearing on the issue, used only to reduce svg output in this example

<la-cartesian :data="values">
    <la-area hide-line prop="pv"/>
</la-cartesian>

Where values is an array of objects:

data: () => ({
    values: [
        { name: 'Page A', pv: 2000 },
        { name: 'Page B', pv: 3000 },
        { name: 'Page C', pv: 1200 }
    ]
})

The SVG produced contains duplicate Path elements. Specifically, duplicate elements === values.length.

<svg width="600" height="300" viewBox="0 0 600 300">
    <g>
        <defs>
            <linearGradient id="la-area-2-0">
                <stop stop-color="#3fb1e3" stop-opacity="0.5"></stop>
            </linearGradient>
        </defs>
        <g>
            <path d="M8,165.77..." fill="url(#la-area-2-0)" style="..."></path>
            <!-- duplicate path elements === values.length -->
            <path d="M8,165.77..." fill="url(#la-area-2-0)" style="..."></path>
            <path d="M8,165.77..." fill="url(#la-area-2-0)" style="..."></path>
            <path d="M8,165.77..." fill="url(#la-area-2-0)" style="..."></path>
        </g>
    </g>
</svg>

Full sample here https://jsfiddle.net/3dhs87co/

• In my case, the path elements have an opacity applied to them. Since the path elements overlap, the path elements are effectively opaque.
• The DOM grows rapidly with larger arrays.

Expected Behavior

A single path element generated for values.

Is there a possibility to set the width of the "la-cartesian" component to 100% width of the parent element instead of passing the value as pixels?

Good work by the way, I really appreciate your project!

Greeting. @QingWei-Li .. I wanted to contribute to your project and I've designed a logo for your project. If you like it, I'll send you files and pr. what do you think? if you need anything change please let me know.
Best Regard, Mirza Zulfan

I have array of data:

let chartData = [
  {
    "time": 1568197200,
    "hashrates":[
      {
        "algo": "ethash",
        "value": 220
      },
      {
        "algo": "equihash",
        "value": 210
      }
    ]
  },
  {
    "time": 1568197500,
    "hashrates":[
      {
        "algo": "ethash",
        "value": 230
      },
      {
        "algo": "equihash",
        "value": 220
      }
    ]
  },
  {
    "time":  1568197800,
    "hashrates":[
      {
        "algo": "ethash",
        "value": 240
      },
      {
        "algo": "equihash",
        "value": 230
      }
    ]
  },
  {
    "time": 1568198100,
    "hashrates":[
      {
        "algo": "ethash",
        "value": 220
      },
      {
        "algo": "equihash",
        "value": 220
      }
    ]
  }
];

For the example above - I need to draw two parallel diagrams for ethash and equihash. Something like that:

<la-cartesian :data="chartData">
    <la-line dot curve v-for="" prop="ethash"></la-line>
    <la-line dot curve prop="equihash"></la-line>
    <la-tooltip>time {{ time value here }}<br>
equihash: {{ equihash value here }}<br>
ethash: {{ ethash value here }}
</la-tooltip>
</la-cartesian>

But I haven't prop... I have only index in "horizontal" array. Is it possible to use laue in my case, or do I need use only native d3?

Custom tooltip seems not up to date. Didn't work with vue-cli 3.
<la-tooltip> <div class="tooltip" slot-scope="props"> <ul class="list"> <li :key="item.label" v-for="item in props.actived" :style="{ borderTop: '3px solid ' + item.color }"> <div class="label">{{ item.label }}</div> <div class="value">{{ item.value }}</div> </li> </ul> </div> </la-tooltip>

Can I rotate the bar chart?
like:

thx.

Wondering if there is a way to create a horizontal bar chart?

(ie: Something as such:)

This not issue but i want to point if i can adjust the size of labels at the bottom? I already override via css but nothing happen maybe its because its inside of svg.

It is possible? from what i see he is always 15px both mobile and desktop

thankss

When trying the quick start code in a basic Vue 3 app with Vite, I get the following error in my browser console:

Uncaught TypeError: slots.forEach is not a function
    render http://localhost:3000/@modules/laue/dist/laue.js:478
    <anonymous> http://localhost:3000/src/main.js:8
    render http://localhost:3000/@modules/laue/dist/laue.js:478
    <anonymous> http://localhost:3000/src/main.js:8

Trying the same code in a Vue 2 app, everything works as expected.

Generally it'd be really nice if in combination with the autoresize option, to be able to have the bar (and stacked bars) auto size their widths based on how many bars are in the chart, wider with fewer bars and narrower when more bars are present.

Sorry, me again! 😅

Taking this 365 day example with 365 points of data for the line, x axis labels and y axis labels, is there a way of setting a x/y label limits so the chart is still readable?

Overly simple example
5 labels maximum
<la-y-axis :limit="5" prop="labelData"></la-y-axis>
Bottom and top values can be equal to the :bound or lowest/highest value in prop.
The final 3 labels are divided equally in the remainder of the Y axis.

So if :bound[30, 300] then the y axis text would appear as...

300 -

232.5 -

165 -

97.5 -

30 -

on a side note I have checked the API at https://laue.js.org/api/#yaxis and I wonder if <la-y-axis tickSize="10" prop="labelData"></la-y-axis> is what I am looking for, but neither that nor <la-y-axis :tickSize="10" prop="labelData"></la-y-axis> seems to alter the axis at all (neither does fontSize).

Either I am missing something again due to using a basic implementation or the docs might need a little more love to help beginners use laue fully.

Sorry this question was stupid and I have no idea how to delete my question :$

When using autoresize with a stacked bar chart, I'm overlapping the Y axis with my first bar.

<template>
  <la-cartesian autoresize stacked :data="values">
    <la-bar prop="pv"></la-bar>
    <la-bar prop="uv"></la-bar>
    <la-bar prop="amt"></la-bar>
    <la-x-axis prop="name"></la-x-axis>
    <la-y-axis></la-y-axis>
    <la-tooltip></la-tooltip>
  </la-cartesian>
</template>

<script>
import { Cartesian, Bar, Tooltip, XAxis, YAxis } from 'laue'

export default {
  name: 'StackedBar',
  components: {
    LaCartesian: Cartesian,
    LaBar: Bar,
    LaTooltip: Tooltip,
    LaXAxis: XAxis,
    LaYAxis: YAxis
  },
  data () {
    return {
      values: [
        { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
        { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
        { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
        { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
        { name: 'Page E', uv: 1890, pv: 4800, amt: 1700 },
        { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
        { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
        { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
        { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
        { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
        { name: 'Page E', uv: 1890, pv: 4800, amt: 1700 },
        { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
        { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
      ]
    }
  }
}
</script>

i just copied your sample code to my project , chart is ok , but x and y axis and tooltip not showing .

Hi!
I was building a quick demo and found out that the tooltip and legend don't have any options for formatting. For my stacked bar chart, legend is empty, for example. It would be great if tooltip and legend had a formatting option like axes do.

Is it possible to display a biaxial chart ?

Any plan to support Candlestick and OHLC charts?

I'm having an issue with getting tooltips to render, and I'm not understanding what props need to be where.

My chart currently looks like this:

<la-cartesian autoresize :bound="[0]" :height="260" :data="values">
    <la-area fill-color="#8AD2BD" prop="views" color="#03a87c" :width="5" dot curve></la-area>
    <la-x-axis :interval="8" prop="date"></la-x-axis>
    <la-y-axis :gridline-interval="5" :interval="5" :gridline="true"></la-y-axis>
    <la-tooltip>
        <div class="tooltip" slot-scope="props">
            <div class="title">{{ props.label }}</div>
                <ul class="list">
                    <li
                        :key="item.label"
                        v-for="item in props.actived"
                        :style="{ borderTop: '3px solid ' + item.color }">
                    <div class="label">{{ item.label }}</div>
                    <div class="value">{{ item.value }}</div>
                </li>
            </ul>
        </div>
    </la-tooltip>
</la-cartesian>

When I don't try to format the tooltips and simply rely on <la-tooltip /> the tooltips render just fine. I'm just having trouble wrapping my head around the usage of customizing these.

Great package! Love these charts and how clean the documentation is for them.

I'm seeing an issue in my setup where the curved line is actually underneath the area fill, so the dots and line are being cut off. Is there anything you can think of that I could do to adjust that?

Large edit to strip away the noise and make things clearer.

How can I make the y-axis always return the highest point in my data set (data set contains majority float values that shouldn't be rounded, does laue do some float rounding?), and where does the y-axis generate its intervals from?

For testing purposes i => i === 100 produces varied results on different data sets with no obvious reason why (again, this could be a float issue though perhaps?). Always returning the highest value will only be possible when the total i is accessible or at the very least consistent intervals across data sets (both data sets above have 365 entries with varied high/low points in data).

For more info see the previous edit 14th Aug, but I think this version is clearer!