Is There Some Examples To Start This Package?

[ds199895]

I used this package but I met some questions. I has some questions about how to adjust the chart drawing canvas and now it seems too short.

[noirb]

Some good examples are a good suggestion to add, haha 😅

But to address your immediate question:

First, you should add the default stylesheet to your project. This can be done via the theme .tss file referenced in your PanelSettings. (if you're not sure where those are located, you should be able to find a reference to the default PanelSettings in your project on the UIDocument in your scene, this then contains a reference to the .tss file)

The default styles are intended to be a usable base to work from, and hopefully you will only need to override individual properties like the font or background-color of a chart type for your project. Some charts have additional properties referencing USS classes, as well (e.g. LineChart.MarkerClass, which are intended to allow you to provide your own custom USS classes for styling part of the chart without needing to mess around in the base .uss file.

With the base stylesheet added to a project and no other USS adjustments, the following UXML produces the charts in the gif below. The charts on the left expand to fill all available space, while the ones on the right are wrapped in an element with a limited height (in practice, a custom USS class which applies this height constraint on the chart itself might be preferable, but it depends on how the charts fit into your layout).

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement name="root" style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
        <ui:TwoPaneSplitView name="SplitRoot" fixed-pane-initial-dimension="600" picking-mode="Ignore" fixed-pane-index="1" orientation="Horizontal" style="background-color: rgba(43, 62, 62, 0); width: 100%; height: 100%; flex-shrink: 0;">
            <ui:TwoPaneSplitView name="SplitTwo" fixed-pane-initial-dimension="600" picking-mode="Ignore" fixed-pane-index="1" orientation="Vertical" style="background-color: rgba(43, 62, 62, 0); width: 100%; height: 100%; flex-shrink: 0;">
                <NB.Charts.LineChart major-grid-color="#412F2FFF" default-data-color="#802F2FFF" color-palette="C_Pastels" axis-label-left="Left Label" axis-label-right="Right Label" show-markers="false" marker-class="nb-chart-lineplot__marker-square" style="height: 256px; transform-origin: center;" />
                <NB.Charts.LineChart major-grid-color="#2F3A5AFF" default-data-color="#802F2FFF" color-palette="C_Solarized" axis-label-left="Left Label" axis-label-right="Right Label" show-markers="false" marker-class="nb-chart-lineplot__marker-square" style="height: 256px; transform-origin: center;" />
            </ui:TwoPaneSplitView>
            <ui:TwoPaneSplitView name="SplitThree" fixed-pane-initial-dimension="600" picking-mode="Ignore" fixed-pane-index="1" orientation="Vertical" style="background-color: rgba(43, 62, 62, 0); width: 100%; height: 100%; flex-shrink: 0;">
                <ui:VisualElement style="flex-grow: 1; background-color: rgba(0, 49, 101, 0.67); width: 100%; height: 256px; max-width: 100%; max-height: 100%;">
                    <NB.Charts.LineChart major-grid-color="#2F413AFF" default-data-color="#802F2FFF" color-palette="C_Tableau10" axis-label-left="Left Label" axis-label-right="Right Label" show-markers="false" marker-class="nb-chart-lineplot__marker-square" style="height: 256px; transform-origin: center;" />
                </ui:VisualElement>
                <ui:VisualElement style="flex-grow: 1; background-color: rgba(0, 49, 101, 0.67); width: 100%; height: 256px; max-width: 100%; max-height: 100%;">
                    <NB.Charts.LineChart major-grid-color="#FDFDFDFF" default-data-color="#802F2FFF" color-palette="C_Geometry" axis-label-left="Left Label" axis-label-right="Right Label" show-markers="false" marker-class="nb-chart-lineplot__marker-square" major-grid-line-width="1" style="height: 256px; transform-origin: center;" />
                </ui:VisualElement>
            </ui:TwoPaneSplitView>
        </ui:TwoPaneSplitView>
    </ui:VisualElement>
</ui:UXML>